Progress Bars with SharePoint Online Column Formatting – April 2018 Update

On my blog post Progress Bars with SharePoint Online Column Formatting I showed how the new Column Formatting functionality can help to show progress bars inside a list:

On this post, I received the following comment from Rick:

Progress is usually associated with completion (blue). What would it take to have the progress % be blue, and the background color of the bar (= 100%), associated from a separate column?

Your “status” (Red, Yellow, Green) could be different for various reasons not associated with the progress. So, if your progress is 50%, 1/2 the bar would be blue. If your “status” column (choice) is Red, the second 50% of the bar would be Red. Go to status column, change to yellow, then second 50% would be Yellow, and progress 50% is still blue.

I created a new list for this with a Choice column called “Risk” (values: Low, Medium, High), and a Number column called Progress. The final look with the new Column Formatting JSON applied looks as follows:

Updating the original JSON was easy. What I did was:

1. Add a background colour to the main DIV that I already had available, and set the colour to red/amber/green depending on the value of the Risk column
2. Update the background colour of the percentage SPAN to a static colour instead of a dynamic colour based on a value

Here’s the updated JSON:

{
   "elmType":"div",
            "style":{
            "background-color":{
               "operator":"?",
               "operands":[
                  {
                     "operator":"==",
                     "operands":[
                        "[$Risk]",
                        "High"
                     ]
                  },
                  "#ff1111",
                  {
                     "operator":"?",
                     "operands":[
                        {
                           "operator":"==",
                           "operands":[
                              "[$Risk]",
                              "Medium"
                           ]
                        },
                        "#ffdd00",
                        "#00ff00"
                     ]
                  }
               ]
            },
			"width":"100%"
			},
   "children":[
      {
         "elmType":"span",
         "txtContent":{
            "operator":"+",
            "operands":[
               {
                  "operator":"*",
                  "operands":[
                     "@currentField",
                     100
                  ]
               },
               " %"
            ]
         },
         "style":{
            "background-color":"#CCCCFF",
            "width":{
               "operator":"+",
               "operands":[
                  {
                     "operator":"*",
                     "operands":[
                        "@currentField",
                        100
                     ]
                  },
                  "%"
               ]
            },
            "text-align":"center"
         }
      }
   ]
}