0

Hi i have this list that i use as a webpart to our homepage and it has a column name Status which has 3 choices. Ongoing, Scheduled and Completed. What i want to happen is when a choice is ongoing the background column of the column is green, Scheduled is orange and so on.

Thanks in advance.

2

For the classic list view in SharePoint Online, we can use Client Side Rendering to render list view.

A demo - Use the following script to the page to render “Status” column:

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
    var overrideNameField = {}; 
    overrideNameField.Templates = {};
    // This action will edit the “Status” field. You can change the “Status” to another custom column.
    overrideNameField.Templates.Fields = {
        "Status": { "View": overrideNameFieldTemplate }        
    };    

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideNameField);

})();
function overrideNameFieldTemplate(ctx) { 
//get the column value.
var currentVal = ctx.CurrentItem["Status"];
   // Render the column
switch (currentVal) { 
        case "Ongoing": 
            return "<div style='background-color :#00ff00'>" + currentVal + "</div>"; 
            break; 
        case "Scheduled": 
            return "<div style='background :#ffa500'>" + currentVal + "</div>"; 
            break; 
        case "Completed": 
            return "<div style='background :#ff0000'>" + currentVal + "</div>"; 
} 
}
</script>

Information about Client Side Rendering

For the modern list view in SharePoint Online, we can use JSON to render the column.

A demo - Format the "Status" column using the following JSON:

{

   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "background-color": {
         "operator": "?",
         "operands": [
            {
               "operator": "==",
               "operands": [
                  "@currentField",
                  "Completed"
               ]
            },
            "#ff0000",
            {
         "operator": "?",
         "operands": [
            {
               "operator": "==",
               "operands": [
                  "@currentField",
                  "Ongoing"
               ]
            },
            "#00ff00",
            {
         "operator": "?",
         "operands": [
            {
               "operator": "==",
               "operands": [
                  "@currentField",
                  "Scheduled"
               ]
            },
            "#FFA500 ",
            ""
         ]
      }
         ]
      }
         ]
      }
   }
}

Learn more about using column formatting to customize SharePoint

  • The JSON worked for me. But my next step is to use it as a webpart and display it on our landing page. But after i put it as a webpart in our landing page the formatting disappear. – user76768 Jun 18 '18 at 16:33
  • Is it a modern page or a classic page? – JoannaW_MSFT Jun 19 '18 at 1:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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