SharePoint List Column Customization using jQuery

This SharePoint customization tutorial, we will discuss below list column customization using jQuery.

  • How to set the background color in SharePoint list field using jQuery
  • How to Set Default value for Status column on SharePoint List NewForm.aspx using Jquery
  • How to Change row Color based on SharePoint list status column using jQuery

How to set the background color in SharePoint list field using jQuery

Now, we will see how to set the background color in SharePoint list field using jQuery.

Here, I have a SharePoint list which has a field called “Status”, this filed has a drop down list Contains Red, Green and Yellow.

  • If you select Red then background should become Red
  • If you select Green then background should become Green
  • If you select Yellow then background should become Yellow

Edit the All items List page in the browser and add a Content Editor Web part, modify the web part and show the Source Editor to add the following code:

<script language="javascript" src="/JS/jquery-1.9.0.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
  var colr="";
$("select[title$='Color']").change(function () {
  colr=$("select[Title=' Status ']").val();
  $("select[Title='Status']").css("background-color",colr);
  });
 });</script>

After adding jQuery click apply and ok. Save page, you can see the final result like below:

set background color in SharePoint list field using jQuery

Set Default value for Status column on SharePoint List NewForm.aspx using Jquery

Now, we will discuss how we can set status column (dropdownlist) default value to Open or Close using jQuery in SharePoint list form.

We will see how we can set dropdown default value in SharePoint 2010 list form using jQuery. In this example we have a Approver, which has 2 radio button value. When user select Approve value then automatic status column will set to “Open” and if user select Reject, then automatic status column will set to “Close”.

Code Steps:

<script language="javascript" src="/JS/jquery-1.9.0.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function(){
var selected="";
$(".ms-RadioText input[type='radio']").click(function(){
selected = $("input[type='radio']:checked");
if($(this).val() == "ctl00")
{
$("select[Title='Tools Status']").val(‘Open').attr("selected", "selected");
}
else
{
$("select[Title='Tools Status']").val(‘Close').attr("selected", "selected");
}
});
});
</script>

Before Selecting Approver Option:

Set Default value for Status column on SharePoint List NewForm.aspx using Jquery

After Selecting Approver Option:

Set Default value for Status column on SharePoint List NewForm.aspx using Jquery

This is how we can set Default value for Status column on SharePoint List NewForm.aspx using jQuery.

Change row Color based on SharePoint list status column using jQuery

Now, we will see how to change row color based on status column in SharePoint list using jQuery. We have been given is to put together a Requester monitoring list which is easy enough to do in SharePoint, but the 3 status easy visual way of seeing what status each of the requester was on.

The status used in this list is:

  • Approved
  • Rejected
  • 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 Requester is on.

Change row Color based on SharePoint 2010 list status column using jQuery

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:

Change row Color based on SharePoint 2013 list status column using jQuery

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 labeled 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>
Change row Color based on SharePoint 2016 list status column using jQuery

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 different names against different action Status.

Change row Color based on SharePoint online list status column using jQuery

This is how we can change row color based on SharePoint list status column using jQuery.

You may like following SharePoint tutorials:

Here we learned:

  • How to set the background color in SharePoint list field using jQuery
  • How to Set Default value for Status column on SharePoint List NewForm.aspx using Jquery
  • How to Change row Color based on SharePoint list status column using jQuery
free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

>