Change column color of a list webpart

Question

We have a landing page that consist of a scheduled maintenance list webpart and we want to have a color coded background for a column. For example: In Progress = Red Completed = Green

I tried the JSON column formatting but it only works on a list not a webpart. Also the input on the list webpart may change everyday so i can't apply static CSS.

Can anyone help me?

Thanks in advance

Answer 1

Try some jQuery like this. This will look at each row and change the background color. Let me know if you need help implementing this.

$(function(){
            $("td.ms-vb2").each(function(){
                var that = $(this);

                      if (that.text() == "Completed"){
                            that.parent("tr").children("td").css("background-color", "#0000FF");
                }else if (that.text() == "in Progress"){
                            that.parent("tr").children("td").css("background-color", "#008000");
                }else if (that.text() == "Ongoing"){
                            that.parent("tr").children("td").css("background-color", "#FF0000");
                }

            });
        });

Answer 2

You can use the JS Link functionality of list view and can achieve this result easily.

Here is some code that you need to put in a JS file, Lets say in TaskListJSLink.js.

(function () {
    var statusFieldCtx = {};
    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "Status": {  //The internal name of that column.
            "View": StatusFieldViewTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);

    function StatusFieldViewTemplate(ctx) { //Function to change the status styling
        var statusValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; //To get the current item's status value.
        if (statusValue == "Completed") {
            return "<div style='background-color:green;color:white'>" + statusValue + "</div>";
        }
        if (statusValue == "In Progress") {
          return "<div style='background-color:red;color:white'>" + statusValue + "</div>";
        }
        else{
            return statusValue;
        }
    }
})();

Next step is to add the file reference into list view. Suppose your JS file is currently in /SiteAssets/TaskListJSLink.js

So, edit the page and edit the list web part. In the miscellaneous section, add the link reference in JS Link setting as - ~sitecollection/SiteAssets/TaskListJSLink.js.

The ~sitecollection is required in the beginning to provide correct path otherwise it won't work.

Now, Save the changes and see the magic.

Well, you can achieve more with this JSLink functionality like -

Ping me if you want to know.

Answer 3

How about a JavaScript that checks the text in the status column and changes the css background color accordingly?

Answer 4

try using jslink to render the page / view.

https://social.msdn.microsoft.com/Forums/office/en-US/2447b5c7-e8bb-4c08-84d0-9f4b791159a7/sharepoint-2013-using-jslinks-to-color-code-a-column?forum=sharepointdevelopment

Answer 5

Try this code in the script editor webpart,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("table.ms-listviewtable tr td").each(function(){
    if($(this).text()=="In Progress")
    {
        $(this).css("background-color","#ff3333");
    }
    else if($(this).text()=="Completed")
    {
        $(this).css("background-color","#00ff55");
    }
    else if($(this).text()=="Ongoing")
    {
        $(this).css("background-color","#c2d6d6");
    }
 });
});

</script>

Its similar to jpollar answer.