Conditional Formatting SharePoint List Display Form Using JavaScript

SharePoint Conditional Formatting Display Form

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


Conditional Formatting SharePoint List Display Form Using JavaScript

In SharePoint 2016 / 2013, I have created a SharePoint list with the blow settings:

Conditional Formatting SharePoint choice field

As you can see, we have a choice field “Project Status” with the below entries:

  • Not Started.
  • In Progress.
  • Finished.
Conditional Formatting SharePoint List

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
  • If the Project Status equals “Not Started“, the cell should be highlighted with RED.
highlight field in SharePoint Display form
  • If the Project Status equals “In Progress“, the cell should be highlighted with GREEN.
Conditional Formatting SharePoint Display form
  • If the Project Status equals “Finished“, the cell should be highlighted with BLUE.
background  field color in SharePoint Display form

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“.
Edit Form web Parts
  • The ‘Display Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘ > Add Script editor.
Add Script Editor Web Part
$('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

Highlight Row in SharePoint Display Form

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:

highlight row in SharePoint Display form

Applies To

  • SharePoint 2016.
  • SharePoint 2013.
  • SharePoint 2010.
Download
See Also

Leave a Reply