none
Highlight list item entire row in red color, based on new item created - SharePoint Online RRS feed

  • Question

  • Hi All,

    I need to highlight entire row in red color, based on the new item created in SharePoint online list.

    I tried many ways, however I end up only coloring the columns in a list rather than entire row.

    For example, If an item is created today, I need to highlight that item in red color

    Any technical advice would be helpful. Thanks.

    Saturday, September 7, 2019 10:25 AM

All replies

  • you need something like below code if you need a entire row red color. below article will get you understand more.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
    SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
    
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
         OnPostRender: function(ctx) {
    
           var statusColors =  {
              'Not Started' : '#FFF1AD',  
              'In Progress' : '#FFD800',
              'Completed' : '#01DF3A' 
           };
    
           var rows = ctx.ListData.Row;
           for (var i=0;i<rows.length;i++)
           {
              var status = rows[i]["Status"];
              var rowId = GenerateIIDForListItem(ctx, rows[i]);
              var row = document.getElementById(rowId); 
              row.style.backgroundColor = statusColors[status];
           }
         }
       }); 
    
    });
    </script>

    https://sharepoint.stackexchange.com/questions/132857/color-code-item-row-based-on-column-value-in-sharepoint-foundation-2013/132865

    Thanks & Regards,


    sharath aluri

    Sunday, September 8, 2019 12:46 PM
  • Hi Kumar,

    If you use classic view for the list, you can use the code mentioned as Sharath, I edit the script and meet your requirement, you can edit the list view page and insert Content Editor web part, paste the code below in it:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    
    <script type="text/javascript" language="javascript">
    
    SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
    
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    
         OnPostRender: function(ctx) {
    
           var today = new Date();
    
           var rows = ctx.ListData.Row;
    
           for (var i=0;i<rows.length;i++)
    
           {
    
              var row = rows[i]["Created"];
    
              var date = new Date(row);
    
              if ( date.getDate() == (today.getDate()-1)&& date.getMonth()==today.getMonth() && date.getFullYear == today.getFullYear)
    
              {
    
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
    
                var myrow = document.getElementById(rowId);
    
                myrow.style.backgroundColor = "red";
    
              }
    
           }
    
         }
    
       });
    
    });
    
    </script>


    If you use modern view, you can only use JSON for each column to color code all the columns in a row.

    Reference: Sharepoint Online List - Format Column/Row to be Red on certain Condition

    Best regards,

    Grace Wang


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 9, 2019 5:57 AM
  • Hi Kumar,

    Is there any update?

    If the post helps you, you can mark it as answer.

    Best regards,

    Grace Wang


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 16, 2019 8:06 AM
  • Hi Kumar,

    I’m checking how the things are going on about this thread. Whether the post helps you?

    You can mark the post as answer if it helps.

    Thanks for your understanding.

    Best regards,

    Grace Wang


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 23, 2019 1:54 AM