Kieran’s Tech Talk – SharePoint CSR field using React

FiveP News

Kieran’s Tech Talk – SharePoint CSR field using React

Kieran Cumming August 1, 2017
Kieran’s Tech Talk – SharePoint CSR field using React

Learn how to customise a field type by using the SharePoint CSR field. Client-side rendering provides a mechanism that you can use to produce your own output for a set of controls that are hosted in a SharePoint page. You can find out more information on Microsoft’s Blog.

Microsoft has definitely made a move to embrace React. SharePoint’s modern experience UI is primarily built with a combination of React and Knockout, and the Office UI Fabric framework offers some fantastic tools to work with.

At FiveP we like to experiment. These experiments have varying degrees of success. However, they leave us with a wide array of solutions we can apply to problems that clients present us with. Recently, a client wanted to have a fairly complex picker interface for one of their site columns.

We had already done extensive work for this client using React and had already used this picker interface elsewhere on the site in our custom components. Instead of re-writing the component in a more traditional client-side rendering (CSR) approach, we decided to bootstrap React into the field directly!

What we landed on was the following approach:

  • Have the base CSR render a single div to pass information to React.  Make sure the div has some custom attributes (ID, value, read only)
  • When initialising the field’s “registerGetValueCallback”, retrieve the value of the field from the custom “data-value” attribute
  • On post render of the field, use Script On Demand (SOD) to load our main application script. Once done, initialise our React component on the div rendered by the base CSR
  • In our React component, any time the data is changed, update the “data-value” attribute

We found this approach to be surprisingly reliable. Obviously it’s not hack-proof (nothing purely client-side is!). It gave us a quick and easy way to apply more modern development practices to SharePoint’s CSR technology.

Enjoyed this article? Stay up to date with our latest news...

Leave a Reply

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