Highlight row by value in Yes/No-column

08.10.2011 Updated with SharePoint 2010 code.


22.04.2010 Updated the code to support multiple views of the same list in the same page, as requested by Mich.

The file “HighlightRowByYesNoColumn.js” is updated.


In this post i will show you how to highlight a row in a list view based on the value in a column of type “Yes/No (check box)”. The code would work on other types of columns as well.

IMG
This is from a standard list view, it does also work in grouped view’s.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

Add a CEWP below the list view and insert this code:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/HighlightRowByYesNoColumn.js"></script>
<script type="text/javascript">
highlightRowByYesNoField('Yes','YesNo','#FFD700','Highlighted rows awaiting action...');
</script>

Parameters explained:

  • valToTriggerHighlighting: The text you want to trigger the highlighting on – “Yes”
  • FieldInternalName: The FieldInternalName of the column to get the value from – must be in view
  • highlightColor: The background color of the highlighted row
  • mouseOverOnRow: The mouse over message when hovered over a highlighted row

The sourcecode for the file “HighlightRowByYesNoColumn.js” looks like this:

SharePoint 2007
/* Highlight row in list view based on value in a Yes/No-column
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * http://spjsblog.com
 * v1.1
 * LastMod: 22.04.2010
 * ---------------------------------------------
 * Include reference to jquery - http://jquery.com
 * ---------------------------------------------
 * Call from a CEWP below the list view with this code:
	<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="/test/English/Javascript/HighlightRowByYesNoColumn.js"></script>
	<script type="text/javascript">
		highlightRowByYesNoField('Yes','YesNo','#FFD700','Highlighted rows awaiting action...');
	</script>
*/

function highlightRowByYesNoField(valToTriggerHighlighting,FieldInternalName,highlightColor,mouseOverOnRow){
	if(typeof(valToTriggerHighlighting)!='undefined'){
		valToFind = valToTriggerHighlighting;
	}
	if(typeof(FieldInternalName)!='undefined'){
		fin = FieldInternalName;
	}
	if(typeof(highlightColor)!='undefined'){
		bgColor = highlightColor;
	}
	if(typeof(mouseOverOnRow)!='undefined'){
		mouseOver = mouseOverOnRow;
	}
	
	$("table.ms-listviewtable").each(function(){
		var thisListView = $(this);
		// Find colindex of YesNo-field
		thisListView.find(".ms-viewheadertr th").each(function(){
			if($(this).text()==fin){
				colIndex = $(this).attr('cellIndex');		
			}
		});
		
		// Loop trough all rows and highlight matched rows
		thisListView.find("tbody:not([id^='aggr']) tr:has(td.ms-vb2)[highlighted!='1']").each(function(){			
			var rowVal = $(this).find("td[cellIndex='"+colIndex+"']").text();
			if(rowVal==valToFind){
				$(this).attr({'highlighted':'1','title':mouseOver}).css({'background-color':bgColor});		
			}		
		});
	});
}

// Attaches a call to the function to the "expand grouped elements function" for it to function in grouped listview's
function ExpGroupRenderData(htmlToRender, groupName, isLoaded){
	var tbody=document.getElementById("tbod"+groupName+"_");
	var wrapDiv=document.createElement("DIV");
	wrapDiv.innerHTML="<TABLE><TBODY id="tbod"+groupName+"_" isLoaded=""+isLoaded+"">"+htmlToRender+"</TBODY></TABLE>";
	tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
highlightRowByYesNoField();
}
SharePoint 2010
/* Highlight row in list view based on value in a Yes/No-column
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * http://spjsblog.com
 * v1.1 for SharePoint 2010
 * LastMod: 08.10.2011
 * ---------------------------------------------
 * Include reference to jquery - http://jquery.com
 * ---------------------------------------------
 * Call from a CEWP below the list view with this code:
*/

function highlightRowByYesNoField(valToTriggerHighlighting,FieldInternalName,highlightColor,mouseOverOnRow){
	var fName;
	if(typeof(valToTriggerHighlighting)!='undefined'){
		valToFind = valToTriggerHighlighting;
	}
	if(typeof(FieldInternalName)!='undefined'){
		fin = FieldInternalName;
	}
	if(typeof(highlightColor)!='undefined'){
		bgColor = highlightColor;
	}
	if(typeof(mouseOverOnRow)!='undefined'){
		mouseOver = mouseOverOnRow;
	}
	$("table.ms-listviewtable").each(function(){
	
		var thisListView = $(this);
		// Find colindex of YesNo-field
		thisListView.find(".ms-viewheadertr th").each(function(){				
			fName = $(this).find('div:first').attr('name')
			if(fName==fin){
				colIndex = this.cellIndex;
			}
		});
		// Loop trough all rows and highlight matched rows
		thisListView.find("tbody:not([id^='aggr']) tr:has(td.ms-vb2)[highlighted!='1']").each(function(){
			var rowVal = $(this).find(">td:eq("+colIndex+")").text();
			if(rowVal==valToFind){
				$(this).attr({'highlighted':'1','title':mouseOver}).css({'background-color':bgColor});
			}
		});
	});
}

function customTimeoutLoop(id){
var obj = $("#"+id);
var isloaded = ($(obj).attr('isloaded')=='true')?true:false;
	if(!isloaded){
		$(obj).hide();
		setTimeout(function(){
			customTimeoutLoop(id);
		},10);
	}else{
		$(obj).show();
		highlightRowByYesNoField();		
	}
}

function ExpGroupRenderData(d, a, e) {
    ULSA13: {
    }
    var c = document.getElementById("tbod" + a + "_"), b = document.createElement("DIV"), f = a.split("-");
    b.innerHTML = "<TABLE><TBODY id="tbod" + a + "_" isLoaded="" + e + "">" + d + "</TBODY></TABLE>";
    c.parentNode.replaceChild(b.firstChild.firstChild, c); 
 customTimeoutLoop("tbod" + a + "_");   
}

Save the code as a file named “HighlightRowByYesNoColumn.js” – mind the file extension, and upload to the scriptlibrary as shown above.

Note when combining with other scripts that embeds the function “ExpGroupRenderData”: The function “ExpGroupRenderData” is not to be added twice. You must leave the one in the script called last, and include the function call to both/all custom function that is to be triggered by expanding grouped view’s – like in line 58 in the SP2007-code above.

Ask if something is unclear

Regards
Alexander

40 thoughts on “Highlight row by value in Yes/No-column”

  1. Hi Alexander:
    Perfection!!! Thank you so much. This will allow a user to communicate very simply with his/her manager on an item that needs special review.

    Can I combine this with EditInListView (for the YesNo field) by simply adding two CEWP’s to the same page? or should the script be blended?

    Happy New Year-

    Charlie Epes

    1. Hi,
      Glad you liked it!
      To combine it with the “EditInListView” you must merge the two CEWP’s and refer all the scripts needed in one CEWP.

      As mentioned in the bottom “Note” i the post you must edit one of the scripts to make it work in grouped view’s by removing the “ExpGroupRenderData” from the script referred first in the CEWP, and include a call to both function in the script referred last.

      The only thing you need to move to the other script in this example is line 56: highlightRowByYesNoField();

      The function “ExpGroupRenderData” is a “naive” SharePoint function that we hijack to force execution of “our code”.

      Alexander

  2. Hi Alexander,

    Really usefull Script!! Thanks a lot for sharing!
    I have a question:

    How cann i use this script with more than one listview on a webpartpage?

    For example if i have 2 Listviews of the same list on one page only the rows of the first listview over the CEWP are highlighted…

    Can you please give me a short tip how this can be resolved!?

    Mich

  3. Thanks Alex, Got the multiple colors working.

    I can’t get the different views to work. I see from the comment above that you have accounted for this but it’s not working for me.

    My main view is a Gantt Chart. Would that have any effect. I also have my gantt chart coloured to match the highlight using a script from http://www.pathtosharepoint.com. Both work fine together. Just when i switch views neither works. Any idea?

  4. Thanks for the response Alexander. And I do apologize in advance for the hand-hold request, but let’s say the name of the column is “Availability”, the response to highlight on is “Not Available” the color of course “yellow” and text “ITC Not Availble”

    What would my CEWP look like? Again thank you so much for your time and ability. This web site is amazing!

    1. Like this:

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="/test/English/Javascript/HighlightRowByYesNoColumn.js"></script>
      <script type="text/javascript">
      
      highlightRowByYesNoField('Not Available','Availability','yellow','ITC Not Availble');
      
      </script>
      

      Alexander

  5. Hi Alexander

    I am glad I found this as it appears to be the only one I can find for hightlighting rows for SP 2010.

    After implementing, i cannot get it to work 🙁

    I changed the parameters above to my values except for mouseover which I left as blank. I updated the jquery, but other than that, I cannot see what else I have missed.

    Any guidance would be appreciated.

    Iain

      1. I got it working, but noticed that it will only work if the webpart is the only webpart in the zone or is the very first webpart. If the webpart is second, the script doesn’t render. Can you add code to filter by webpart title like some of your other scripts?

  6. Hi Alexander

    Firstly, this is a fantastic solution and one I have used a number of times.

    I now have a requirement to highlight a row when the field contains anything at all. ie. It’s not blank. Would this be possible?

    Thank you in advance

    Mark

    1. Hi,
      The function could be rewritten to use a regular expression, but the easiest way is to modify the line
      if(rowVal==valToFind){

      to this:

      if(rowVal.length>0){

      You should copy the function “highlightRowByYesNoField” and rename it to avoid interfering with other places it might have been used.

      Alexander

  7. I tried this in a SP2007 list but cannot get it to work at all. In the HighlightRowByYesNoColumn.js script, does it need to be changed at all or can it be uploaded as is? Does this work with JQuery version 1.7.2? Thanks!

    1. I got it. I had to use JQuery-1.3.2.min. Now I wonder if I could highlight entire columns while still having a row color dominate? The idea is to group by something, highlight top row, and highlight column sections to group data visually as one reads across the list.

  8. For some reason I am having an issue getting this code to work. We are running SP2010 Server. I have a list with a YesNo checkbox and have put both the latest java as well as jquery-1.3.2 into a SiteAssets library. I entered the text into a CEWP without the open/close [javascript]. Is that needed? Same question for the source code file.

  9. HTML1202: /vvmo/Lists/TestColors/AllItems.aspx is running in Compatibility View because ‘Display intranet sites in Compatibility View’ is checked.
    AllItems.aspx
    SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
    AllItems.aspx
    SCRIPT1006: Expected ‘)’
    HighlightRowByYesNoColumn.js, line 33 character 26
    SCRIPT1014: Invalid character
    AllItems.aspx, line 820 character 26

  10. I am using a HTML Form Web Part and the Source Editor because I was having the CEWP reformat the text. This is the code I have in there:

    highlightRowByYesNoField(‘Yes’,’YesNo’,’#FFD700′,’Highlighted rows awaiting action…’);

Leave a Reply