Using JSLink property of the XsltListViewWebPart to control the rendering of a list, listitem & field

Creating the UI of a SharePoint list has been a challenge in the past. We needed SharePoint Designer, XSLT or custom webparts in order to take control of the presentation of our data in SharePoint lists

In SharePoint 2013 you are in control with no impact on the infrastructure of the farm.

The following steps make it very easy for you to control the UI:

  1. Create a new custom list
  2. Add a new column called “Score”newfield
  3. Add multiple items with different scores (These values are only for demonstration purposes)defaultview
  4. Navigate to the gear icon in the upper right corner and press edit page
  5. Edit the web part properties and locate the propertie JSLink at the bottom
  6. provide the following link: ~site/siteassets/jslink.jsjslink
  7. Press OK
  8. Upload the attached jslink.js file to the site assets library
  9. Open the custom list you created and notice the KPI’s.kpi

What if you do not want to take control over a field, but you really want to change the presentation of the entire item?

By modifying the jslink.js, it is possible to provide a render method that will take control over the UI of the item. The following screenshot show you the result when you loop over the attributes of the ctx.CurrentItem object.
Check out the LoopOverAllVars script to see the source.allvars

In our scenario it would be possible to create another view called executive summary and visualize the data like thisitemcontrol

It depends on the customer’s requirements how the information need to be displayed, but I think this technique is very efficient!

Hope it helps!

VN:F [1.9.22_1171]
Rating: 8.8/10 (4 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
Using JSLink property of the XsltListViewWebPart to control the rendering of a list, listitem & field, 8.8 out of 10 based on 4 ratings