{"id":782,"date":"2016-08-26T11:10:58","date_gmt":"2016-08-26T17:10:58","guid":{"rendered":"http:\/\/www.idubbs.com\/blog\/?p=782"},"modified":"2016-08-26T11:10:58","modified_gmt":"2016-08-26T17:10:58","slug":"jslink-filter-on-a-lookup-column-with-csr","status":"publish","type":"post","link":"https:\/\/www.idubbs.com\/blog\/2016\/jslink-filter-on-a-lookup-column-with-csr\/","title":{"rendered":"JSLink – Filter on a Lookup Column with CSR"},"content":{"rendered":"

Lookup columns are both useful and a little odd in how they\u2019re implemented in SharePoint list views. I wrote a bit about this in a previous post<\/a> and showed one example on how to deal with Lookup column content. This post shows an alternative \u2013 and possibly more useful approach. <\/p>\n

We\u2019ll change the default link in the lookup field to a link that filters the current list by the lookup field value.  Yes, users can also use the filter built into the column header \u2013 this is just another way to implement it. I also think this is a bit more intuitive for users. <\/p>\n

At the end of the day, this is just another example of custom link \u2018building\u2019 with CSR.
Sample File: CSR_LookupSelfFilter.js<\/a><\/p>\n

Key lines:
\"image\"<\/a><\/p>\n

With \u2018Theme\u2019 being the internal name of the Lookup field that we\u2019re filtering on. Fairly straightforward. <\/p>\n

The full list:
\"image\"<\/a><\/p>\n

After clicking \u2018Technics\u2019:
\"image\"<\/a><\/p>\n

Now we also need to add a \u2018reset\u2019 link to the web part so that users can get back to the default view. Otherwise, they could get stuck in a dead end after selecting a filter value. There are all kinds of ways to implement this, for simplicity\u2019s sake we just updated the title text and link. 
Before: <\/p>\n

\"image\"<\/a><\/p>\n

After:
\"image\"<\/a><\/p>\n

Obviously you don\u2019t *actually* have to change the text of the web part header \u2013 just the URL. \"Smile\" But again, it seems like better UX. <\/p>\n

Hope this is useful. <\/p>\n

References:
JS Link and CSR Page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Lookup columns are both useful and a little odd in how they\u2019re implemented in SharePoint list views. I wrote a bit about this in a previous post and showed one […]<\/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,4,11,21],"tags":[63],"class_list":["post-782","post","type-post","status-publish","format-standard","hentry","category-client-side-rendering-csr","category-js-link","category-sharepoint","category-sharepoint-online","tag-lookup"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgWQ1-cC","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/782","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=782"}],"version-history":[{"count":1,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions"}],"predecessor-version":[{"id":783,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions\/783"}],"wp:attachment":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/media?parent=782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/categories?post=782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/tags?post=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}