{"id":653,"date":"2015-10-26T20:38:27","date_gmt":"2015-10-27T02:38:27","guid":{"rendered":"http:\/\/www.idubbs.com\/blog\/?p=653"},"modified":"2015-10-26T20:38:27","modified_gmt":"2015-10-27T02:38:27","slug":"jslink-using-the-lookup-column-with-csr","status":"publish","type":"post","link":"https:\/\/www.idubbs.com\/blog\/2015\/jslink-using-the-lookup-column-with-csr\/","title":{"rendered":"JSLink \u2013 Using the Lookup Column with CSR"},"content":{"rendered":"<p>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. <\/p>\n<p><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/10\/image.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; margin: 0px; display: inline; padding-right: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/10\/image_thumb.png\" width=\"244\" height=\"146\"><\/a><\/p>\n<p>Where the link goes to: <\/p>\n<p><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/10\/image1.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/10\/image_thumb1.png\" width=\"313\" height=\"187\"><\/a><\/p>\n<p>The majority of the times I\u2019ve seen a Lookup used, they are simply a list of items to select in a dropdown or radio buttons \u2013 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. <\/p>\n<p>What I\u2019d <em>like<\/em> to see is the Lookup value \u2013 the same text \u2013 displayed without the hyperlink. I can get this value using the following: <\/p>\n<p>ctx.CurrentItem.Theme[0].lookupValue<\/p>\n<p>Or, more generically: <\/p>\n<p>ctx.CurrentItem.[internalName][0].lookupValue<\/p>\n<p>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 \u2018isSecretFieldValue\u2019 is other than a Boolean value. <img decoding=\"async\" class=\"wlEmoticon wlEmoticon-smile\" style=\"border-top-style: none; border-left-style: none; border-bottom-style: none; border-right-style: none\" alt=\"Smile\" src=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/10\/wlEmoticon-smile.png\">&nbsp;<\/p>\n<p>Note: OK. I looked it up. There\u2019s one post under \u2018isSecretFieldValue\u2019 <a title=\"http:\/\/blog.vitalyzhukov.ru\/en\/list-item-hide-user-info-eng.aspx\" href=\"http:\/\/blog.vitalyzhukov.ru\/en\/list-item-hide-user-info-eng.aspx\" target=\"_blank\">here<\/a> \u2013 and if set to \u2018True\u2019 it apparently hides the values of the Created By and Modified By values in the form. Huh. <\/p>\n<p>Back to our Lookup column. <\/p>\n<p>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: <\/p>\n<p>ctx.CurrentItem.[internalName].length<\/p>\n<p>Once an override is put into place using this approach, the list view now looks something like this: <\/p>\n<p><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/10\/image2.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; margin: 0px; display: inline; padding-right: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/10\/image_thumb2.png\" width=\"244\" height=\"152\"><\/a><\/p>\n<p>Definitely cleaner. <\/p>\n<p>Sample code for this example can be found <a href=\"http:\/\/www.idubbs.com\/blog\/?attachment_id=633\" target=\"_blank\">here<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[33,10,11,13,21],"tags":[48,63],"class_list":["post-653","post","type-post","status-publish","format-standard","hentry","category-client-side-rendering-csr","category-office365","category-sharepoint","category-sharepoint-2013","category-sharepoint-online","tag-column","tag-lookup"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgWQ1-ax","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/comments?post=653"}],"version-history":[{"count":0,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/653\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/media?parent=653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/categories?post=653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/tags?post=653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}