0

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

enter image description here

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

5
  • Are you able to deploy custom web parts?
    – jpollar
    Jun 18, 2018 at 17:07
  • When i check the add webpart ribbon it has a Custom category which consist of Autocomplete textbox, book review, docdownload count, sharepoint.intranet.finder and a lot more. Is this it?
    – user76768
    Jun 18, 2018 at 17:45
  • Yes, but it doesn't sound like you created these. I'm asking if you can deploy solutions to the farm. Otherwise, you need to write some JavaScript as Kasper mentions below.
    – jpollar
    Jun 18, 2018 at 18:44
  • I don't have access to that. :(
    – user76768
    Jun 18, 2018 at 18:45
  • You don't have SharePoint Designer either?
    – jpollar
    Jun 18, 2018 at 18:58

5 Answers 5

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");
                }

            });
        });
5
  • I tried to put this on a script editor and all the column was replaced by this error "TypeError: Unable to get property 'style' of undefined or null reference" also some errors were "TypeError: Unable to get property '_events' of undefined or null reference"
    – user76768
    Jun 18, 2018 at 19:39
  • so instead of text, you're seeing the error messages you just listed?
    – jpollar
    Jun 18, 2018 at 20:07
  • Yeah. All the column disappeared.
    – user76768
    Jun 18, 2018 at 20:12
  • You may need to add a reference to jQuery if you haven't done so already. <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    – jpollar
    Jun 18, 2018 at 20:19
  • Sorry to bother you again. The error disappears and it is back to normal but there is no changes on the columns.
    – user76768
    Jun 18, 2018 at 20:30
1

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.

enter image description here

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

enter image description here

Ping me if you want to know.

1
  • Using Client-side Rendering and JSLink, as described here, is the right solution for this problem on SP 2013 or later.
    – Joe McShea
    Mar 27, 2019 at 18:01
0

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

2
  • That's what i'm thinking about but i'm not that proficient on javascript. What I'm having problem about is that the items being inputted changes everyday so the ID or Class of the Column also changes.
    – user76768
    Jun 18, 2018 at 18:45
  • That shouldn't matter. You can have the JS (jQuery) look just at the text in that column and change the background color.
    – jpollar
    Jun 18, 2018 at 19:04
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.