Add an Icon Progress Bar to Microsoft Lists

I am always inspired by the JSON column formatting samples available on the PnP List-Formatting GitHub repository. I recently came across Icon Progress Bar by Julien Seguin and immediately knew that this would be a great addition to one of my daily use Lists.

The Icon Progress Bar sample uses a numeric value to indicate its progression towards completion. For my purposes I want the same functionality but to be driven by status values (Complete, In progress etc.) in the multiple columns that represent the major milestones in the process that I am tracking. This approach requires that the major milestones are manually specified (aka hard-coded) in the column formatting.

My demo List includes the following columns and looks like the image below.

NameTypePurpose
TitleSingle line of textProcess entry that we are tracking
ProgressNumberShow the Icon Progress Bar
Milestone 1Choice with options: “Complete” and “In progress”Significant step in the process
Milestone 2Choice with options: “Complete” and “In progress” Significant step in the process
Milestone 3Choice with options: “Complete” and “In progress” Significant step in the process
Milestone 4Choice with options: “Complete” and “In progress” Significant step in the process
Milestone 5Choice with options: “Complete” and “In progress” Significant step in the process
Demo  list

The number-icon-progressbar.json code uses the @currentField variable to evaluate the stored numeric value. Our approach replaces @currentField with the major milestone columns and instead of evaluating numeric values we are evaluating Choice column values.

Code sample

Here is my sample code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "16px"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "title": "Milestone 1",
        "iconName": "=if([$Milestone1] == '', 'CircleRing', 'SkypeCircleCheck')",
        "class": "='ms-fontColor-' + if([$Milestone1] == 'Complete', 'neutral', 'neutralLight')"
      },
      "style": {
        "padding": "0 2px"
      }
    },
    {
      "elmType": "span",
      "attributes": {
        "title": "Milestone 2",
        "iconName": "=if([$Milestone2] == '', 'CircleRing', 'SkypeCircleCheck')",
        "class": "='ms-fontColor-' + if([$Milestone2] == 'Complete', 'neutral', 'neutralLight')"
      },
      "style": {
        "padding": "0 2px"
      }
    },
    {
      "elmType": "span",
      "attributes": {
        "title": "Milestone 3",
        "iconName": "=if([$Milestone3] == '', 'CircleRing', 'SkypeCircleCheck')",
        "class": "='ms-fontColor-' + if([$Milestone3] == 'Complete', 'neutral', 'neutralLight')"
      },
      "style": {
        "padding": "0 2px"
      }
    },
    {
      "elmType": "span",
      "attributes": {
        "title": "Milestone 4",
        "iconName": "=if([$Milestone4] == '', 'CircleRing', 'SkypeCircleCheck')",
        "class": "='ms-fontColor-' + if([$Milestone4] == 'Complete', 'neutral', 'neutralLight')"
      },
      "style": {
        "padding": "0 2px"
      }
    },
    {
      "elmType": "span",
      "attributes": {
        "title": "Milestone 5",
        "iconName": "=if([$Milestone5] == '', 'CircleRing', 'SkypeCircleCheck')",
        "class": "='ms-fontColor-' + if([$Milestone5] == 'Complete', 'neutral', 'neutralLight')"
      },
      "style": {
        "padding": "0 2px"
      }
    }
  ]
}

If you attempt to replicate this column formatting be sure to update the highlighted sections below for each major milestone column in your list.

A) title is the column name that will display on icon mouse-over.

B) iconName controls the icon used. The if statement checks for empty values in the milestone column. If the column is blank the icon will be CircleRing otherwise it will be SkypeCircleCheck.

C) class controls the color used with the icon. The if statement checks if the milestone column value is Complete, and if so sets the icon color to neutral otherwise it will be neutralLight.

My update code snippet.

You should notice in my updated code that there is child section for each major milestone column that I want to track. The column names in the code must match the internal column names within the list. You can find the internal column name by editing each column from within List Settings. The internal name is shown in the URL path.

Internal column name

To apply the column formatting:

  • select Column settings and then click Format this column.
Format this column
  • Click Advanced mode.
Advanced mode
  • Replace the existing JSON code with our updated code and then click Preview to confirm functionality and then Save to complete the update.
Updated JSON

If all goes well your Progress column should like the image below.

Progress icon!

I was drawn to the Icon Progress Bar sample because it can easily convey current state information for my users without them having to scroll through the entire list to figure where things stand. I can follow the original code well enough to make changes but I would never consider myself a developer so I am grateful to Microsoft Tech Community members like Julien Seguin for sharing the good work that they do. #SharingIsCaring

I hope this column formatting sample inspires you as much as it did for me and be sure to check out the PnP List-Formatting GitHub repository

Thanks for reading!

NY

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s