This is the second part of the blog series which shows how to color code list items in SharePoint 2013 List Display form. Please read the Part 1 of the series for color coding the list view, this blog post is related to color coding a field in display form.
In this example, we will look at color coding a field in SharePoint List’s Display Form using CSR (Client-Side Rendering) or JS Link. For power end users, this is extremely helpful as it doesn’t require writing C# code or deploy any farm solutions etc.
End Result
We are going to use simple conditions to color code the list items.
- Green – If value is greater than 59
- Amber – if value is between 40 and 59
- Red – if value is between -100 and 39
End result will be:
Steps to color code SharePoint list item
In this example, we are using “Current Credit Score” field which is of “Single line of text” type to color code SharePoint list item in SharePoint
- 1. Create a Js file and add the following code in the file. Internal name of your field needs adding at line 6 and 15 instead of Current_x0020_Credit_x0020_Score.
- 2. After making the changes to the above code, upload your updated file in the “Display Templates” folder of “Master Page Gallery” located at site collection level. Set the following properties of the file:
- Content Type: JavaScript Display Template
- Target Control Type: Form
- Standalone: Override
- Target Scope: / (can be used anywhere in the site collection)
- Target List Template ID: 100 (for custom list) [List of all SharePoint list templates]
- 3. Copy the URL of the uploaded JS file to clip board.
- 4. Navigate to the Display form and click “Edit Page” link on the settings cog. While page is in the edit mode, click on the “Edit Web Part” link of list view web part to view web part properties. Enter the URL of the JS file in the “JS Link” property of the web part under “Miscellaneous” category. Make sure the first part of URL has replaced with SharePoint URL token and the final URL should look similar to ~sitecollection/_catalogs/masterpage/Display%20Templates/ColorCodingDisplayForm.js”. Apply settings and Click OK to view the color coding applied to the list view.
Code
Download the source code https://inteknix.com/download/9904/
