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:
Create a new custom list
Add a new column called “Score”
Add multiple items with different scores (These values are only for demonstration purposes)
Navigate to the gear icon in the upper right corner and press edit page
Edit the web part properties and locate the propertie JSLink at the bottom
provide the following link: ~site/siteassets/jslink.js
Upload the attached jslink.js file to the site assets library
Open the custom list you created and notice the KPI’s.
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.
In our scenario it would be possible to create another view called executive summary and visualize the data like this
It depends on the customer’s requirements how the information need to be displayed, but I think this technique is very efficient!
Learn about a tool that analyzes your SharePoint full-trust code solutions and Office add-ins and macros to help you redesign them for the app model. Security is important to us—your code remains private while using the tool.