In this post, we will learn how to apply Conditional Formatting SharePoint List Display Form Using JavaScript.
You might also like to read Show / Hide fields based on choice field selection using JQuery in SharePoint 2016
In SharePoint 2016 / 2013, I have created a SharePoint list with the blow settings:
![Conditional Formatting SharePoint List Display Form Using JavaScript Conditional Formatting SharePoint choice field](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/Conditional-Formatting-SharePoint-choice-field.png?resize=512%2C637&ssl=1)
As you can see, we have a choice field “Project Status” with the below entries:
- Not Started.
- In Progress.
- Finished.
![Conditional Formatting SharePoint List Display Form Using JavaScript Conditional Formatting SharePoint List](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/Conditional-Formatting-SharePoint-List.png?resize=615%2C248&ssl=1)
Now, I would like to apply a conditional formatting in the SharePoint list specifically at the Display Form (View Item).
![Conditional Formatting SharePoint List Display Form Using JavaScript Conditional Formatting SharePoint List Display Form Using JavaScript](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/Conditional-Formatting-SharePoint-List-view-item.png?resize=426%2C482&ssl=1)
- If the Project Status equals “Not Started“, the cell should be highlighted with RED.
![Conditional Formatting SharePoint List Display Form Using JavaScript highlight field in SharePoint Display form](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/highlight-field-in-SharePoint-Display-form.png?resize=517%2C147&ssl=1)
- If the Project Status equals “In Progress“, the cell should be highlighted with GREEN.
![Conditional Formatting SharePoint List Display Form Using JavaScript Conditional Formatting SharePoint Display form](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/Conditional-Formatting-SharePoint-Display-form.png?resize=523%2C172&ssl=1)
- If the Project Status equals “Finished“, the cell should be highlighted with BLUE.
![Conditional Formatting SharePoint List Display Form Using JavaScript background field color in SharePoint Display form](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/background-field-color-in-SharePoint-Display-form.png?resize=515%2C156&ssl=1)
Steps
- Open your SharePoint Site, Open your List.
- Open ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select “Default Display Form“.
![Conditional Formatting SharePoint List Display Form Using JavaScript Edit Form web Parts](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2017/03/form-web-parts.png?resize=514%2C140&ssl=1)
- The ‘Display Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘ > Add Script editor.
![Conditional Formatting SharePoint List Display Form Using JavaScript Add Script Editor Web Part](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/07/Add-Script-Editor-in-SharePoint-2019.png?resize=672%2C813&ssl=1)
- Click on Edit the snippet.
- Download the Conditional Formatting SharePoint List Display Form.
- Edit the code with your own field info
- Field Name.
- Choice Field Entries.
$('h3:contains("Field Name")').closest('td').next('td').text().indexOf('Choice Field Value')
- Stop Editing.
- Add a new Item, then click on ‘…’, select “View Item”.
- Great, the Conditional Formatting SharePoint List on the display form has been applied successfully.
![Conditional Formatting SharePoint List Display Form Using JavaScript Conditional Formatting SharePoint List Display](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/Conditional-Formatting-SharePoint-List-Display.gif?resize=517%2C294&ssl=1)
Download the full row version at Conditional Formatting SharePoint List Display Form. In case, you would like to highlight the full row instead of the field cell as shown below:
![Conditional Formatting SharePoint List Display Form Using JavaScript highlight row in SharePoint Display form](https://i0.wp.com/spgeeks.devoworx.com/wp-content/uploads/2020/12/highlight-row-in-SharePoint-Display-form.png?resize=511%2C278&ssl=1)
Applies To
- SharePoint 2016.
- SharePoint 2013.
- SharePoint 2010.
Download
- Download the full code on GitHub at Conditional Formatting SharePoint List Display Form.