Highlight a list/library line item

I blogged on this a while back using a similar approach for MOSS 2007.  Here is a link to that post: http://saltypc.com/?p=99

Things have changed since then so here are the steps to set this up in 2013.

You will need to reference jquery for this to work.  I prefer to download the minified script and place it in a centralized location inside my farm.

  1. Add a script editor web part to the bottom of your page.
  2. Insert the following into your source:

Modify the Change Me to reflect the column name of your list/library.  You can also change the color to any web safe color of your choice.

To highlight mulitple column choices, simply copy the $Text line and past it below the copied line.

Example:

$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Column A)”); $Text.parent().css(“background-color”, “#FFFFFF”);

$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Column B)”); $Text.parent().css(“background-color”, “#000000”);

This comes in handy when you need to find a needle in a haystack.

 

Stay Salty!

jQuery Security….. Just hide it!

We had an issue come up about security with InfoPath forms.  One of the major issues was that we could restrict items in the view, but if you used explorer view, all of the security would be bypassed.  To counter this, we use a CEWP and the following jQuery script: HideViewsScript

Please note, you will need to change the first line in the script to reference your jQuery file:

<script src=”/PublishingImages/javascript/jquery-1.3.2.min.js” type=”text/javascript”></script>

This will disable all of those pesky views and you will be able to force your security through your main view.

Adjust Width of SharePoint Columns

SharePoint lists and libraries are great.  However, you may have noticed that sometimes, the column width on certain items just looks funky.  To remedy this, all you need to do is add a little javascript.

Go to the list or library that you want to resize and add a Content Editor Web Part.

From the script below, I am referencing jQuery from my internal site.

Copy and paste this code into the CEWP.

<script src=”/PublishingImages/javascript/jquery-1.3.2.min.js” type=”text/javascript”></script><script type=”text/javascript”>$(function(){$(“TH.ms-vh2-nograd:contains(‘Column 1’)”).css(“width”, “350px”);

$(“TH.ms-vh2-nograd:contains(‘Column 2’)”).css(“width”, “350px”);

});

</script>

Column 1” and “Column 2” will be the name or your columns that you want to resize.

Here is an example I used and only resized one column:

Before:

 

 

 

__________________________________________________

After:

 

Highlight line items in a SharePoint list

This is actually a very simple process and only requires a small amount of javascript to do the job.

Follow these steps and your will be highlighting in no time!!!

  1. Go to your list to be highlighted
  2. Edit Page
  3. Add a Content Editor Web Part
  4. Move the CEWP to the bottom of the page
  5. Click the Edit Source button
  6. Copy and paste the following lines of code into the source code section
<script src=”/PublishingImages/javascript/jquery-1.3.2.min.js” type=”text/javascript”></script><script type=”text/javascript” language=”javascript”>var x = document.getElementsByTagName(“TD”) // find all of the TDsvar i=0;for (i=0;i<x.length;i++){if (x[i].className==”ms-vb2″) //find the TDs styled for lists{

if (x[i].innerHTML==”Next Day Pickup”) //find the data to use to determine the color

{

x[i].parentNode.style.backgroundColor=’yellow’; // set the color

}

}

}

</script>

  1. Make your changes to the innerHTML section to reflect the list value for the jquery lookup
  2. Set the color of your choosing.  You can also choose to use the html value for the color: FFFFOO

Please note, I am referencing jquery inside of my SharePoint site.  This way, I do not have to add an external reference.