Now that Column Formatting has begun rolling out to SharePoint Online tenants, I decided to look at some older use cases and test how they could be achieved with this new functionality.

The first use case is a common one: an item’s progress is tracked in a list with a percentage indicator – a project’s total completion so far, an individual task’s progress, etc. This is usually stored as a number and shown in percent:

The goal now is to add a visual indicator, a coloured progress bar that makes it more appealing to look at the available data. The SharePoint team has already released an example of how something similar could be achieved, but without any additional colours:

Here’s what I created (code below), to test the formatting of the bar with different colours, as well as different other CSS styles (text alignment).

In this example, if the value is 33 or below, the background of the bar is orange. From 34 to 66 it’s yellow, and for anything above 66 it is green. I’m also using a narrow height for the bar instead of the full width by adding a <span> child element instead of putting my formatted content directly into the root <div>

And without further ado, here is the sample code I used:

{
   "elmType":"div",
   "children":[
      {
         "elmType":"span",
         "txtContent":{
            "operator":"+",
            "operands":[
               {
                  "operator":"*",
                  "operands":[
                     "@currentField",
                     100
                  ]
               },
               " %"
            ]
         },
         "style":{
            "background-color":{
               "operator":"?",
               "operands":[
                  {
                     "operator":"<=",
                     "operands":[
                        "@currentField",
                        0.33
                     ]
                  },
                  "#ffa500",
                  {
                     "operator":"?",
                     "operands":[
                        {
                           "operator":"<=",
                           "operands":[
                              "@currentField",
                              0.66
                           ]
                        },
                        "#ffff00",
                        "#00ff00"
                     ]
                  }
               ]
            },
            "width":{
               "operator":"+",
               "operands":[
                  {
                     "operator":"*",
                     "operands":[
                        "@currentField",
                        100
                     ]
                  },
                  "%"
               ]
            },
            "text-align":"center"
         }
      }
   ]
}

17 thoughts on “Progress Bars with SharePoint Online Column Formatting”

Leave a Reply

Your email address will not be published. Required fields are marked *