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"
         }
      }
   ]
}

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

  1. Thank you for your article. It is very informative. I have an interesting question for your format.

    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.

  2. Hello Can you add a step by step process to add the code ? where do we add it ,? do we need a webpart ? etc etc pleaaaaase !

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.