67 thoughts on “Highlight rows in SharePoint lists”

1. Pingback: WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)! - Blog del CIIN

2. Pingback: WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)! « Pasión por la tecnología…

3. Hey Christhope, its the pain in the a$$ again. So I am trying to convert the backgroud highlight to just a border with no success. I tried the this.style.border=””1px solid black””, but did not work. then I tried with creating classes. so I added this.className=””applyBorder”” and in the apply border class I had my border settings, still no luck. Can this be done? do we lose the border capibility using the TR?

4. I am trying to highlight rows in a list based on the contents of 2 separate fields. If the priority field is high, then the row should highlight red. If the status field is approved, the row should highlight green. I am having trouble getting the code in the calculated field to produce the highlighted row. My entire list is highlighted red. Also, i have to enter a number between 100 and 999 to get a color. I can’t enter the name nor the hex equivalent of the color. This is my first time doing something like this in sharepoint and I am very confused. Please help me if you can. Thanks

5. Hi Larry,

   I think you’ll have to use each TD element inside the TR and apply the border.

   I was also trying to apply border in TR elements couple days ago and after found out that IE won’t apply border on the TR element.

   I didn’t have chance to check the other browsers though. Hope this helps.

6. “So in practice you may want to merge it with another calculated column”. My question is….how do I merge the mouse over calculation with another calculation column already set up?

7. Hi Gretchen,
   to merge the highlight script column with a data column, simply concatenate them on a third column like this: [script column]&[data column], respect the order, it works.

   Has anybody tried to modify the highlight script to simultaneously use it with the color coding one? The highlight script does not “remember” the color coding before the mouseover, so colored rows get “blanked”.

8. Clacby – Thanks, your awesome. It worked perfectly.

9. Hi,
   I have created two lists in my Sharpoint site.One list has coloumns employee_name and employee_id.Other list has coloumns like employee_id and department.Can I create a third list by performing join between the two lists.For eg can i crete a third list having coloumns employee_id,employee_name and department.The resources available with me are just Windows Sharepoint Services 2.0.Is it possible to perform that task without using sharepoint designer ?

10. Clacby: the script removes the background color on mouse out, this is the expected behavior. If instead you want to get back to the initial color, try this:

    onmouseout=function(){this.style.backgroundColor=”””&Color&”””;}

11. Pingback: Splitting the top navigation in two « Path to SharePoint

12. Christophe, I would like to color a row based on the status field, as well as use the row highlight option! Can this be done?

13. Sham, I have updated the post to show how to combine both effects.

14. I’d like a show / hidden html code to put into content editor webpart, for V2 Head line news either roll over or click to show content
    any suggestions?

15. Hi Christiophe
    Thanks for all the great scripts so far but I do have a question.
    Your code works great except when I hit refresh.
    Also when loading it sometimes does not work either. If I go and select view and reselect the default view, all the rows show up highlighted as needed. Did I miss something? I’m new to this and was happy to get it working, it just doesnt work consistantly unless you always refresh by selecting the default View. Thanks!

    • It is working fine for me. As mentioned in the post, I have implemented this in my list of SharePoint blogs, and hitting refresh doesn’t change the behavior.

    • I’m having the same trouble. When I go to the page with the webpart on it, there’s no formatting. However, when I click on Edit Page the formatting is automatically applied. If I then close the “Edit Page”, the formatting remains. BUT, f I navigate away from the page, and come back to it the formatting is gone and I have to repeat the process to bring the formatting back. Is anyone else experiencing this issue, or found a resolution for it?
      Thanks for any feedback!

      • RB, which browser are you using?

        • Hi Chris,
          I’m using IE6. Below is the modified formula that I’m using. Perhaps I’ve got an extra ” or two and that’s why it’s not working as expected. I’m not sure.
          Thanks!

        • RB: I’d recommend that you start with the example in the article, to confirm that it works. Then you can start tweaking it for your specific needs.

      • Awesome Blog!
        I’m actually seeing this same issue with IE7 in Vista. I’m using the script copied directly from above without edits. Tried cliearing out the cache and all that but it didn’t help. my color column simply has the word “red” in it for now to test. Anyone find a resolution to this?

        • See if my comment from July 9, 2010 helps.

16. Highlight by mouse over works fine for me as well, its the solid highlighted row that vanishes on me from time to time. Sometimes when I open the site it wont be there or if i hit refresh. Maybe its that we are still using an older version of IE as well. I will have to double check the code, maybe I just put it part of it wrong. Thanks!

17. Hi

    Im very a much a noobie to both sharepoint and asp but i’ve been thrust into managing a sharepoint site…

    I was wondering if you can put a condition into this bit of code, so it says
    if (column = A)
    then make blue
    else column = b
    make red

    or something along those lines.

    thanks for these pages, its really a huge help! 🙂

    • I am glad you find this site helpful 🙂
      Yes, you can put a condition (based on the content of the other columns). This is exactly what happens in this example, where the color is based on the priority level.
      For more information, follow the links mentioned in this post, in particular in the “choose your color”section.

18. Hi Chris,
    I’m trying the above script “Example 2: color coding list rows” to highlight the whole row with color but not able to get it.

    From instruction above, I created a column name “color” where I set my condition and getting the required cell color, and a blank picture “blank.gif” in picture library. However, still failed to get the color out. I’m not sure where went wrong?

    Btw is it a must to have “blank.gif” as for my example is pretty simple. I have only 2 conditions, “Yes/No”. If Yes, the whole row will be highlighted.

    Thanks in advance for your advise
    Demi

    • Demi, the method requires a picture, but the picture you use doesn’t matter. I’d recommend that you keep the one in my example, as it is included by default in your SharePoint environment:
      ‘/_layouts/images/blank.gif’
      Did you apply the Text to HTML script on the page? See this post for more information:
      https://pathtosharepoint.wordpress.com/2009/11/19/html-calculated-column-minor-update-and-some-advice/

19. Hello –

    I am wondering if I could set the row colour based on two datafields…?

    For eg:

    I have two columns “Status” and “Priority”. Now these are the challenges I have –

    1) I want to set the row colour RED if the Priority is HIGH
    2) I want to set the row colour GREEN if the Status is CLOSED
    3) I want to set the row colour YELLOW if the Status is ONGOING and Priority is (not equal to) HIGH

    Is this doable?

    Please advise.

    Many thanks,
    Sujit.

    • Sujit: sure you can. Just write the formula that determines the color with the appropriate IF statements.
      You’ll also have to clarify your conditions. For example, what should be the color if priority is high and status is closed.

20. Salut Christophe
    My concern is simpler than coloring rows. It’s coloring column, no matter the values. And I didn’t find another way to do it but to add columns with “fake” values and use your method with an IF or a CHOOSE , that doesn’t choose actually nothing.
    Do you happen to have a simpler way to do this?

    Thanks

21. Thanks Christophe.

    If the priority is high and status closed, then the row should be green.

    I did try some IF statements with conditions, but they didn’t work… Perhaps I was using the wrong syntax…

22. Hello,
    I am not able to change the color of row on “onload” event of img.

23. Hi Christophe,

    you are GREAT!
    I’ve used your code and it roks!
    Just a little strange behaviour, in a connected list until you have choosen an item it doesn’t highlight the row.
    Are you aware of a system to automatically choose the item list once the page is loaded?
    Thanks for your work.

24. Hi Christophe, the code works perfectly, except fort fontSize… I’m using this code:
    =”

    ”
    but just the font size is not updated…. do you know why?

25. This code works great. I want to take it a step further though. i want to highlight a row if a task due date is past today’s date.

    I’m a little new at all this coding stuff in sharepoint, so I’m not sure the best way to go about this.

    Any help would be appreciated.

    • Not an esy task. Search my blog for “countdown” for some ideas.

26. I’m having the exact same issue as shown in item dated Nov 20 by RB. I used your exact example…

    <>

27. For those who reported an issue at page load or refresh: could you please provide more information on your environment: wss or MOSS? browser version? Other scripts in the page?

    • I have the same refresh issue. Only works if I go to “Edit Page”. I’m using MOSS 12.0.0.6510 on the server. Client is IE8 on Windows 7. No other custom scripts running on the page.

      Thanks.

28. Great way to avoid the tr code using dataview in SPD however do you think it is possible to link to the list entry display form by clicking anywhere along the highlighted row?

29. I have a list with the default view in datasheet and need certain rows to be a color (based upon information in a choice field) and a particular field (of my choosing) to be another color (based upon the information in the same choice field). Also, can this formatting be seen in datasheet views?

    • Rick: the formatting will only work in html. This excludes the datasheet view, which is a Microsoft proprietary format.

30. Christophe,
    I found this very useful and used Example 2, thanks!
    Unfortunately since my SP server has been upgraded to 12.0.0.6520 lists have not been showing color formatting any more, and it only appears if you sort them by clicking on a column’s header or if you switch to Edit Page. Tested this with both IE7 and Safari 4.0.4.
    Any idea what could be the reason for this behaviour?

    • Solved. The problem was that with the new SP release the TextToHTML web part must not be hidden.

31. I’m wondering if it is possibe to set formatting based on date and time… ie if something will happen in the next 2 hours, then make it yellow. at the moment the [Today] function returns today at 12:00 midnight, not current time.

32. For further specification, I have a list acting as a despatch list.. We want cells to be yellow if despatch time is due withing 2 hours.

33. Hi Chris!

    I’m writing to point out and confirm some previous posts about strange behaviour of row highlighting (RB posts etc.). I’ve been using your scripts for a year or so and they worked great.

    I tested this issue on WSS 3.0 builds 12.0.0.6535 and 12.0.0.6529 (Polish versions) and looks like this:
    1. Only TexttoHTML 2.1.1 script on page (I tried earlier ones but no difference)
    2. Highlighting Works fine in grouped COLLAPSED view
    3. Does not work in grouped EXPANDED view and a flat one (no grouping)
    4. It starts look ok in Edit Mode and after sorting non-working views by clicking on any column’s header.

    IE DevToolbar shows there’s no difference in rendering HTML column itself but the broken views lack “style=background-color: MYCOLOR” element in the row (TR tag). After sorting/editing page this tag is updated and views work fine.

    I tested it via IE 8 (IE8 mode, IE7 mode, IE8 Compatibility mode) and Opera 10+ – the results are the same.

    Other HTML column tricks like calendars, icons, image links etc. work and render fine as far as I noticed – just the row highlighting…

    I use formula:
    =””

    Let me know if U need any other info – I’ll gladly help/check anything you point out.

    Cheers, Bullvan

    • I wanted to paste Example 2 from this post 😉

      PS Highlighting and other operations on just cells (TDs) work fine.

    • OK, it was really bugging me off as the script looked fine and I thought that SharePoint was doing it wrong… After comparing the source of sorted (by clicking the column header) and default flat view I noticed the lack of reference to core.js file in faulty view.

      WALK-AROUND:

      I’m not a dev or anything so I just pasted the SCRIPT tag with reference to src=”_layouts/1045(my Polish installation, EN is 1033)/core.js” just above the TxtToHTML script and it started to look allright 😉

      I’ll try to paste it…

      <script type="text/javascript" language="javascript" src="/_layouts/1045/core.js"></script>
      

      It’s just a walkaround but I hope it will help some of HTMLcc fans for now 😉

      Bullvan

      • Sorry for talking to myself so much but another option is adding to the TextToHTML script (or somewhere on ASPX) just the definition of the function You used for highlighting the row – GetSelectedElement.

        I copied it from core.js ?(which reference was missing so getting and then modyfing the TR was impossible). I checked it and it works:

        function GetSelectedElement(elem, tagName)
        {
        	while(elem !=null && elem.tagName !=tagName)
        		elem=elem.parentNode;
        	return elem;
        }
        

        Do you have any other ideas how to solve the situation? Modyfing the whole script just to solve one usecase of it seems too radical…

        Bullvan

        • Bullvan, I think your last comment – include the GetSelectedElement function in the TextToHTML script – is a good option, and should address the issue. You could even rename it to avoid any conflict with the default function.
          Alternately, you could use parentNode directly in the formula. So, in my example, instead of:
          GetSelectedElement(this,””TR””)
          use:
          this.parentNode.parentNode.parentNode
          (adjust the number of “parentNode” to reach the correct level)

        • I’m having similar issues with the row color code rendering. Need to hit edit page to have color code row show up. How would I add the GetSelectedElement to the script? Can I just copy / paste into the script the way it is – where should it be pasted. Programmer I’m not… Thanks

        • geekminer, try my suggestion from July 9, it’ll be easier.

34. Hey Christophe,
    Hope you’re well. I am trying to add a function to a calculated field. The function I want is to add the text to the clipboard. I have tried to follw this and edit it with the new function, but no luck. Is there anyway around the image?
    here is my calcualted field, can you see any issues?

    ="<DIV id='holdtext"&[LOC_ID]&"' onload='GetSelectedElement(this,""TR"").onclick=function(){holdtext"&[LOC_ID]&".innerText = copytext.innerText; Copied = holdtext"&[LOC_ID]&".createTextRange(); Copied.execCommand("Copy");};'>"&[LOC_ID]&"</DIV>"
    

    • Larry, where did you get this from? What are holdtext, copytext, etc.?These don’t look like JavaScript functions, so I am not surprised that it doesn’t work.

35. Hello Christophe

    Thank for a great blog. I have been reading on it several times.
    I need to be able to change the text color of the whole TR instead of background, and that does not seem to work.

    I use this so far:
    =CONCATENATE(“”;IF(ISERROR(SEARCH(“waitress”;[Job Title];1));” “;””);[First Name];” “;[Last Name];””)

    it works if I put in style.backgroundColor=’red’

    Any idea why I can’t change text color?
    I even tried some other attributes like bold, text align etc and they work.

    -Thomas

    • It seemed I didnt get the full text 🙂

      =CONCATENATE(“”;IF(ISERROR(SEARCH(“waitress”;[Job Title];1));” “;””);[First Name];” “;[Last Name];””)

      • Well seems I need to use some kind of tag.
        Well basically my example isnt that important. All that should be needed to verify it is to use your own example and use style.color = red instead.

        This might be pretty simple, but I cant style to save my life 🙂

        • My guess: you are applying a color style at the row level, but then SharePoint overwrites it with color styles at the cell level.

          On WordPress, use “sourcecode” – under brackets – for posting code.

        • Hi again

          Thanks for the tag 🙂

          Well it seems a bit odd that you are able to change the background then, since that is actually styled in the list. The text color is just black.
          Well I ended up making a sharepoint kpi indicator instead. Thank you for your response and very good posts on these calculated columns.

36. Thomas, I checked the core.css file again, and didn’t see any background style at the cell level (ms-vb2 class). Only the font color is set.

37. Hi,

    I am stuck in between a problem.
    Please help me.First thanks in Advance.
    I am fetching data from the share point list.With all the details In my list data is fetching through id.I want the row we are currently showing will be in bold color.I am fetching through SPAPI query.and using table to show the data.
    I want only that to be bold.
    Please reply

38. Ciao, davvero interessante, grazie

39. Tale sito informativo! Grazie grande! Grazie per un buon tempo che visitano il tuo sito. E ‘davvero un piacere comprensione di un sito web come questo pieno di informazioni piacevole. Grazie!

40. Thank you Christophe and Bullvan! I changed my Text to HTML script, and now my highlighted rows are rendering immediately.

41. Hi, i need to change the background color when the row position is an odd number, like one white the other grey, for example, in a xslt code using a connection to a list in Sharepoint Designer, i’ve done that, but when i print the page doesn’t show the grey colour.
    Does anyone knows who to achieve this ?

    Thanks in advance!

42. Admiring the hard work you put into your website and in depth information you provide.
    It’s nice to come across a blog every once in a while that isn’t the same old rehashed material.
    Great read! I’ve bookmarked your site and I’m including your RSS feeds to
    my Google account.

Comments are closed.