Conditional Formating in SharePoint Display Form via JQuery

In this hint, I’ll show How to apply a Conditional Formating in the Display Form based on a specific field value via jquery?


I have a SharePoint list field called ‘Status’, I need to apply a conditional formatting on its row based on its value in the ‘Display Form‘ as the below condition.

  • If (Status == “In progress”) then set the background color row to green.
  • Else set background color row to red.change-background-row-color-in-sharepoint-display-form


  • Open ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Display Form.

Form web Parts

  • The ‘Display Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘ > Add Script editor.

Script Editor


  • Add the following code based on the field title and the field value.
<script src="" ></script>
if ($('h3:contains("Status")').closest('td').next('td').text().indexOf('In progress') != -1)
$('h3:contains("Status")').closest('tr').css("background-color", "green");
$('h3:contains("Status")').closest('tr').css("color", "white");
$('h3:contains("Status")').css("color", "white");
$('h3:contains("Status")').closest('tr').css("background-color", "red");
$('h3:contains("Status")').closest('tr').css("color", "white");
$('h3:contains("Status")').css("color", "white");
  • Stop editing.
  • View the list item, you should note that when the ‘Status‘ field equal to ‘In progress‘ its row will be formatted as shown below:change-background-row-color-in-sharepoint-display-form

Enjoy 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s