SharePoint 2013 List Column Status Wise Change Row Color Using jQuery

Posted: July 20, 2014 in SharePoint2013

Introduction

This article provides a Requester monitoring list that is easy enough to do in SharePoint. The 3 statuses are an easy visual way of seeing what status each of the requesters was on. The statuses used in this list are:

  1. Approved
  2. Rejected
  3. Pending

These values are populated from a Choice field in the list, but as you can see from the before image below it is not that easy to quickly and easily see what level each of the Requesters are on.

Requester

On the Edit page, select the Insert Web Part tab from the Ribbon. From the Categories menu, select Media and Content and then Script Editor from the Parts menu:

Script Editor

Click on the Add button at the bottom of the page to install the Web Part.

Embedding Code to Your Site

  • Once the Web Part has been successfully installed on your page, you will see a hyperlink button under the Script Editor labelled EDIT SNIPPET. Click the EDIT SNIPPET link to insert HTML/Script code:

    <script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js”></script>

    <script type=”text/javascript”>

        $(document).ready(function () {

            $Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Approved’)”); $Text.parent().css(“background-color”, “#01DF3A”);

            $Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Rejected’)”);

            $Text.parent().css(“background-color”, “#F90101”);

            $Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Pending’)”);

            $Text.parent().css(“background-color”, “#EAC117”);

        });

    </script>

    Script code

  • After you have inputted the appropriate code in the Embed dialog box, click Insert to save the HTML/Script.

Below you can see the end result with some data entered and various names against various action statuses:

action Status
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