locked
How to acheive the color coding for a particular item in a list? RRS feed

  • Question

  • Hello Friends,

    I have a requirement where a particular row should be highlighted when a value is met. For example: I have a list in which I have a Manager field. So if the manager value is "Robert" then the entire row should be highlighted.

    So is there any way that can be achieved using OOTB implementation? If not please specify how to achieve it


    Thanks & Regards, Chandra Shekhar
    Tuesday, December 13, 2011 4:58 AM

Answers

  • Hi,

    You can use Jquery to do the same. you can apply it using content editor webpart.

    You can refer this example and can modify it:

    http://allaboutmoss.com/2010/04/15/highlight-sharepoint-list-rows-conditionally-using-jquery/

    I hope this will help you out


    Thanks, Rahul Rashu
    Tuesday, December 13, 2011 5:08 AM
  • Hi,

    You can add a Content Editor Web Part in your page and place it at the bottom of the page. Then copy the code into Source Editor:

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

         $(document).ready(function(){

              var count=0;

              var THs=$('.ms-viewheadertr').find('th');

              $(THs).each(function(){

                      var colName=$(this).find('a').text();

                      if(colName=="Manager")             //Manager: the field you want to judge. (You can set any field you want to judge by changing this parameter.)

                      { return false; }

                      count=count+1;

              });

             $('table.ms-listviewtable > tbody > tr').each(function(){

    var TDs = $(this).children();

    var manaName=$(TDs[count]).find('a').text();

                  if(manaName=="Robert")            

                            $(this).css('background-color','green');

                 });

       });

    </script>

    Note: the code above is based on that the Manager Field is the people or group type. If it’s not that type, the code needs a little change.

    Thanks.


    Emir Liu

    TechNet Community Support

    Tuesday, December 13, 2011 11:17 AM

All replies

  • Hi,

    You can use Jquery to do the same. you can apply it using content editor webpart.

    You can refer this example and can modify it:

    http://allaboutmoss.com/2010/04/15/highlight-sharepoint-list-rows-conditionally-using-jquery/

    I hope this will help you out


    Thanks, Rahul Rashu
    Tuesday, December 13, 2011 5:08 AM
  • Hi,

    You can add a Content Editor Web Part in your page and place it at the bottom of the page. Then copy the code into Source Editor:

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

         $(document).ready(function(){

              var count=0;

              var THs=$('.ms-viewheadertr').find('th');

              $(THs).each(function(){

                      var colName=$(this).find('a').text();

                      if(colName=="Manager")             //Manager: the field you want to judge. (You can set any field you want to judge by changing this parameter.)

                      { return false; }

                      count=count+1;

              });

             $('table.ms-listviewtable > tbody > tr').each(function(){

    var TDs = $(this).children();

    var manaName=$(TDs[count]).find('a').text();

                  if(manaName=="Robert")            

                            $(this).css('background-color','green');

                 });

       });

    </script>

    Note: the code above is based on that the Manager Field is the people or group type. If it’s not that type, the code needs a little change.

    Thanks.


    Emir Liu

    TechNet Community Support

    Tuesday, December 13, 2011 11:17 AM
  • There are several ways to achieve this. I've written an article on our company blog that provides links and background information on each on these options:

    How to do list highlighting in SharePoint

    In summary, these options are:

    Client based

    • JavaScript: Put some JavaScript code into a Content Editor Web Part
    • Designer: Use SharePoint Designer to set up Conditional Formatting

    Custom Field Type

    • Code it yourself: Make your own custom field type from scratch
    • Buy: Purchase a pre-made solution (we happen to sell one of those :) )

    Sunday, December 18, 2011 6:36 PM