How to put a color code on a sharepoint column(Choice) base on the input

Question

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.

Answer 1

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