Partager via

Client Side Rendering - Cross Site Lookup

  • Article

Client-Side Rendering (CSR) Lookup Column (v1.0)

I typically suggest that every organization should focus on their Metadata and Taxonomy to push down a common set of terms and lookups on sub sites and lists. There are occasions however, where a crafty developer or site collection administrator may want to curate their own custom solution. Policy may require business decision makers to create a common term set and implementation plan. This may not coincide with an application development timeline or site collection requirements. I thought this would be a great example of what CSR can really accomplish. Many years ago, I developed a full-trust solution where a custom site column would launch a modal dialog and provide drop-down pickers or a search box to query a site collection list or an external system. This provided a common set of ever growing terms to be tagged to any list or `site. While full-trust was great, it always ran into the issues of configuration, scalability, and disaster recovery concerns. There were methods to automate the deployment, but that did not keep the solution constantly updated with each SharePoint patch. Also in a disaster recovery scenario, the solution was not always deployed and configured correctly. Fast forward to today and we have a fantastic new feature called Client Side Rendering that allows you to extend the UI with pure JavaScript. This example took about an hour to build and deploy, and it didn't require an administrator to deploy it.

The current lookup column is an example which provides a cross site lookup query that allows all lists to pull from the same set of values in a “root” lookup list. The sandbox solution CSRCrossSiteLookup.wsp can be enabled on any Site Collection where it will deploy artifacts that offer the site column to any SPSite or SPWeb. If you are looking for the source code, download it at GitHub.

Artifacts:

  • Site collection list ‘Facility’ with various columns to store facility metadata
  • Site collection ‘Site column’ with CSR JS Link providing the custom lookup
  • Site Assets (jQuery 1.11; CSR Template and Field JS files, Bootstrap.js)

Features:

  • List feature: Deploys the site collection lookup metadata list
  • Field feature: Deploys the site column
  • Asset feature: Deploys site assets and Bootstrap.js injection on all pages

 Issues with v1.0:

  • The current implementation does not provide for Quick Edit or Data Access modifications.
  • The current implementation does not support Quick Edit.

Custom Lookup Field

 

 

Field is filterable and sortable

 

 

Custom field (Control of Display)

 

 

OOTB Link to separate URL

 

 

 

 

Long running dialog (rather than waiting to load query, modal instantaneously loads and renders)

 

 

 

 

 

The CSR lookup field does not provide user readability filtering.

The CSR field does not have custom header values for filtering. It presents data the way it is stored in the field.

The OOTB field has custom handlers which present user friendly text data.
   

 

 

The CSR Lookup field as implemented does not provide for Quick Edit or Data Access modifications.

Comments

  • Anonymous
    April 19, 2016
    I do agree with all the concepts you've offered to your post. They are really convincing and will definitely work. Nonetheless, the posts are too short for novices. May you please extend them a bit from subsequent time? Thank you for the post.
    • Anonymous
      May 02, 2016
      Absolutely. I'll be publishing a few more in depth articles momentarily with code samples.