JSLink – Using the Lookup Column with CSR

This post covers another column type for use with CSR overrides. Lookup columns have what I consider an irritating default display characteristic in that they are displayed as a hyperlink to the lookup list item.

image

Where the link goes to:

image

The majority of the times I’ve seen a Lookup used, they are simply a list of items to select in a dropdown or radio buttons – like a category. In this case the hyperlink and displaying the form are useless (to me). Every so often the lookup list has a few other fields, like Description, etc. in that case the link can be a bit more useful, but it still seems to be more of a distraction from a user experience (UX) perspective.

What I’d like to see is the Lookup value – the same text – displayed without the hyperlink. I can get this value using the following:

ctx.CurrentItem.Theme[0].lookupValue

Or, more generically:

ctx.CurrentItem.[internalName][0].lookupValue

You can also access two other properties of the item. The properties are: isSecretFieldValue, lookupId, and lookupValue. And no, right now I have no idea what the heck ‘isSecretFieldValue’ is other than a Boolean value. Smile 

Note: OK. I looked it up. There’s one post under ‘isSecretFieldValue’ here – and if set to ‘True’ it apparently hides the values of the Created By and Modified By values in the form. Huh.

Back to our Lookup column.

As with several other column types, the Lookup column can contain more than one item and is stored as an array. As with those other column types you can also check how many items are contained in the column value by checking the length of the array:

ctx.CurrentItem.[internalName].length

Once an override is put into place using this approach, the list view now looks something like this:

image

Definitely cleaner.

Sample code for this example can be found here.

5 comments

  1. Hi Wes,

    I was at your CSR session at SharePoint Fest in DC recently. I’ve tried to get this solution to work in my site but having no luck. I’m not very experienced at this! Previously I’ve used the Content Web Part with .txt files so this is new territory for me.

    I copied the sample code and saved it as a .js file.
    I put the .js file in Site Assets.
    I edited the list page, edited the web part, expanded the Misc section and added the link to /SiteAssets/UnlinkLookup.js
    I then Stopped Editing

    The list view is unchanged, the lookup values are still linked.

    Am I supposed to customise the sample code in some way?

    1. A few of things to look at:
      1. I don’t recommend using the SiteAssets library. Technically it should work just fine there though.
      2. When you say ‘list page’ are you editing the default list view pages? Again, this is technically possible, but not recommended if you’re able to use a separate page with a list view web part dropped on it.
      3. Are you using the correct internal field names that you’re referencing in your code?
      4. Did you use the ‘token’ in the JS Link property field (starts with ‘~’) or did you just use the file path (/SiteAssets/…)?
      5. Where I have ‘ctx.CurrentItem.Theme{0]…’ you need to replace ‘Theme’ with the internal name of the lookup field you are customizing.

      Apologies for the delay in getting back to you. Let me know how it goes!

  2. New to CSR. I’m confused on how I would add multiple lookup fields to this script. Can you share what that would look like using your code?

    1. AH. Sorry I missed your post for a bit. Have you figured it out? Otherwise I can see what I can pull together for an example.

    2. OK. Reading this again are you simply asking how to override more than one column in the same list?

      If you have two columns, both lookups, the code snippet might look something like this:

      overrideCtx.Templates.Fields = {
      ‘LookupColumn1’:{‘View’:ctx.CurrentItem.LookupColumn1[0].lookupValue},
      ‘LookupColumn2’:{‘View’:ctx.CurrentItem.LookupColumn2[0].lookupValue}
      };

Leave a Reply to Sandra Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.