Sunday, December 28, 2008

Highlight SharePoint List rows conditionally

Hi All,here is some JQuery Stuff that will help you to highlight rows of SharePoint List items based on some condition.


<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>
<script>

$(document).ready(function(){

$Text = $("td .ms-vb2:contains('Sales')");

$Text.parent().css("background-color", "green");

$Text =$("td .ms-vb2:contains('Account')");

$Text.parent().css("background-color", "orange");

});

</script>


above JQuery code will highlight if Column has 'Sales' then row will highlight with color green.if column has value Account then it will highlight with orange color.

Look at second Post http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html

24 comments:

chakravarthi said...

Hi
I try to change list rows by adding the javascript in content editor webpart. it's not working

Please help me to how to work with this
Regards
Chakravarthi

Hari said...

Can you please help me how hilight rows with respective colors using this Script.
Please help by providing steps

Manesh said...

It's Nice !!!
Do u have any Information abt how to use Yahoo UI Lib. in sharepoint

Jayesh Prajapati said...

hi all,
this here you need to download jQuery.js from
http://docs.jquery.com/Downloading_jQuery

you need to download jQuery.1.3.1.js rename this file to jQuery.js and put it in layouts folder and referece this javascript in code as i did in this code..

now as you can see in the code I have find a colums that contains value "sales" and highlight it in green , find account in column and highlight in orange. same way you can do in the list..
for simply way try to simulate the list as given in above image.. and apply this code you will understand how to do it..

Regards,
SharePointKings

Daz said...

I can't get this working in SharePoint either. I'm embedding the javascript in a Content Editor WebPart. A simple alert works, bu as soon as I add the js file link & script for the colouring it doesn't run.

Jayesh Prajapati said...

Hi Daz,
I have mentioned steps above you need jQuery for this. follow above steps hope it will work for you..

Regards,
SharePointKings

jabeen said...

The above code snippet works fine for me.But if i use Group by based on any column , the view doesnt diplay the colors. And i need to set colors based on the content of a field . i mean if a column value equlas G, then it should display green color in the column , if it equals R, it should display Red color in that column.pls help

SharePoint Kings said...

Daz/Jabeen

we check that with using group by this thing is not working.

that is because JQuery works same javascript after page load it will fire and find particular table/td/tr/div/cell/text or anything and change its color. but while using group by that collapsed group item is not rendered on the browser so JQuery or javascript is not able to find and change color.

thanks for you effort and comments. we will try to find some work around asap.

Thanks,
SharePoint Kings Team

ZebulonP said...

Could you please add how to highlight only when a word like "Sales" is in a specific column, say "Dept"????

Felicia said...

Hi Jayesh,

You are good~ I've been looking for solutions on other blogs but none is as clear and elaborative as yours.

May I ask you, what are the codes for this requirement?

"Approved" = green
"Waiting Approval" = yello
"Declined" = Red

So, instead of numbers, I want to have texts, but I dont know how to change~

I'll be grateful if you could help me~

SharePoint Kings said...

Felicia, read the both post again. your answer is in the post it self.

search for your text like 'Approved' instead 'Sales' that used currently.

SharePoint Kings said...

ZebulonP,

you have to work a little in Jquery :)

Anonymous said...

Can you please advise where exactly has to be added this code?

I have a Project Management Sharepoint page that I cannot edit in order to add an editor web part.
I can edit it with Sharepoint Designer though.

Thanks,
M. R.

SharePoint Kings said...

M.R.

you can add one content editor web part on the above list view web part and mentioned script in content editor.

Anonymous said...

This is great for getting colors by row. Let's say I wanted to have a whole column colored the same color defined by the column name?

SharePoint Kings said...

Hay Anonymous,

we had not tried this yet but
this might be possible if you see the Script we are finding td (table cell) content some particular department like "Sales" or "Account" and then changing row color by that cell.parent . now you can change each cell color rather then changing row color.

give it a try it might work

Anonymous said...

Thanks for responding quickly. I tried the above method, and was unsuccessful. The row was still selected rather than the cell itself.

I'd really like to color the entire column by column name so I can have multiple colors in a single row. The limiter for me is I'm using time data which is updated daily so finding a table cell wouldn't be a good reference, which is why I thought the column name would work better. Any suggestions?

Thanks - Anon

SharePoint Kings said...

make sense in your case,

we had not tried this so cannot point you to exact solution but check few JQuery function on internet and you must get it.

may be just find our main table and find which number of column you want to highlight then loop through each cell or row and highlight that cell which is on some particular space.

if we get time we will do it and post an article on this but it will not be soon as we have quite few request in queue.

hope this help

Anonymous said...

Hi,
How could modify this script to highlight just word/cell, not the entire row?
Thanks,
Eric

SharePoint Kings said...

Eric,

refer this link http://www.sharepointkings.com/2010/04/sharepoint-custom-so-called-kpi.html

study javascript you should get idea from this.

chakri said...

hi
i followed all the steps..but the colors are not changing for me....

my code lokks like this



var jQPath="/-LAYOUTS/js/jquery.js";
document.write("<script src='",jQPath,"jquery.min.js'

i used my jquery path like this..

can any one help me..i need this urgent....

chakri said...

hi
Can you please help me

i followed all the steps..but i didnt get the colors...


i used my jquery path into script like this(refer this url:http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html)

var jQPath="-LAYOUTS/js/jquery.js";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'

can u pls help me..its urgent for me ...

chakri said...

Can you please help me?i follwed all the steps(refer this link :http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html).i used my jquery path into script tag like this...

var jQPath="-LAYOUTS/js/jquery.js";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'

any body help me...i need this urgent...

SharePoint Kings said...

chakri,

just check are you getting proper path or not.

if its only path problem then you can directly user path from
like http://code.jquery.com/jquery-1.7.1.js




Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com