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?

Scenario:

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

Steps:

  • 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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>
<script>
$(document).ready(function(){
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");
}
else
{
$('h3:contains("Status")').closest('tr').css("background-color", "red");
$('h3:contains("Status")').closest('tr').css("color", "white");
$('h3:contains("Status")').css("color", "white");
}
});
</script>
  • 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 🙂

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s