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.
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”):
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:
/* Highlight row in list view based on value in a Yes/No-column
* ---------------------------------------------
* Created by Alexander Bautz
* alexander.bautz@gmail.com
* https://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();
}
/* Highlight row in list view based on value in a Yes/No-column
* ---------------------------------------------
* Created by Alexander Bautz
* alexander.bautz@gmail.com
* https://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
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
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
Does anything need to change to make it work on a text or choice field
I do not think so. Is it not working?
Alexander
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
Hi Mich,
The code is updated.
Alexander
Hi Alexander,
thanks a lot! 🙂
Works Perfectly!!
Mich
Hi Alex,
Great scripts. Just wondering if it would be difficult to do this to multiple items on the one list. i.e Yes = Yellow and No = Red?
Hi,
Just call the function again with the new parameters.
Alexander
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?
Hi,
I tested it in a Gantt view with no problems. Did you put the CEWP below the view?
Alexander
Hi Alex,
Yeah sorry, my mistake. When i added the CEWP to the other views i forgot to drop them under the view. Thanks 😉
Hi Alex, would I be able to use this to turn the row yellow if the Modified column has not chaged in the last 11day?
How and where do you insert the variables? I am trying to reference a lookup column that says “Not Available” in it.
Sorry, I meant “Parameters” in the above question.
Hi,
In the call to the function “highlightRowByYesNoField”.
Alexander
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!
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
Thank you sir! That worked fine… 🙂
Will this work in 2010 and on grouped lists?
Whoops, just saw the code for grouped views. Not having any luck in 2010 though, anyone else get it to work in 2010?
Hi,
See updated code.
Alexander
The line 58 highlightRowByYesNoField() is not passing any parameters while the function expects parameters.
This is by design. If you look in the function, it’s checking for the presence of the argument.
Alexander
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
Hi,
I suspect this code will not work with jQuery above v1.6.4.
Which version are you using?
Alexander
I suspect this doesnt work with Contacts? I’ve tried with no success.
I do think it should work. Have you tested it in a “custom list” to ensure your get it working?
Alexander
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?
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
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
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!
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.
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.
I have updated to article to fix the code formatting to get rid of the [javascript] tag. Do you see any errors in the developer console? (hit F12 > Console) when you load the page?
Alexander
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
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…’);
highlightRowByYesNoField(‘Yes’,’YesNo’,’#FFD700′,’Highlighted rows awaiting action…’);
There may be an issue with the single quotes in your code example. Try rewriting them – or copy the source code again.
Alexander