SharePoint – Use JQuery to highlight rows


Hello everyone. Today I want to show you how you can use jQuery and SPServices to conditionally highlight rows of your SharePoint Web Parts.

Here is the script you need:

<script type="text/javascript" src="/sites/test2/Script/jquery.min.js"></script>
<script type="text/javascript" src="/sites/test2/Script/jquery.SPServices.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Test",
CAMLQuery: "<Query><Where><Eq><FieldRef Name='YesNoField' /><Value Type='Integer'>1</Value></Eq></Where></Query>",
CAMLViewFields: "<ViewFields> <FieldRef Name='ID' /> </ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {

$("tr[iid*='"+ $(this).attr("ows_ID").toString() + "']").css("background-color", "#A3F02E");

});
}
});
});

</script>

The above Script will check the value of the “YesNoField” column in your “Test” List and if the value is “Yes” (1) it will highlight the row. If the value is “No” (0) it will do nothing.

To use the script click on Edit Page on your website and add your List Web Part and a Content Editor Web Part and add a link to your script to the Content Editor Web Part. (You need to store the script somewhere on your website in a Library.)

sharepoint_setup_highlighted_row

If you set up everything correctly the result will look like this:

sharepoint_highlighted_row

That´s it. You can now use this method to highlight specific rows. I hope you liked my post. See you next time 🙂

And as always you can download my script from here.

Sources:

http://mekalikot.blogspot.co.at/2014/01/highlight-sharepoint-task-list-row.html

http://spservices.codeplex.com/wikipage?title=GetListItems

http://social.msdn.microsoft.com/Forums/sharepoint/en-US/1905cd40-c66b-4865-a036-299c88b8bc51/how-to-write-caml-query-for-yes-no-field

http://mekalikot.blogspot.co.at/2014/07/highlight-row-change-font-color-and.html

Advertisements
Tagged ,

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

%d bloggers like this: