Workflow Steps

The Workflow Steps shows which stage of a process an item has reached as a row of connected dots, with completed steps filled, the current step glowing, and the rest waiting. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a choice column. The JSON maps each status value to a step, so a request or task reads like a progress tracker instead of a word.

Author

SharePoint Maven

Built with

Lists

Features

Choice Column, JSON, Single Line of Text Column

Common Use Cases

Approval or review stages on requests
Onboarding or offboarding progress
Case or ticket lifecycle
Deal or pipeline stages
Publishing or release steps
Any staged process you want shown as steps

Details

Design Pattern: Metrics & Progress
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Request	Single line of text	`[Title]`
Stage	Choice	`[Stage]`

Prerequisites

Build a list with a choice column for the stage before you paste the JSON.
Then populate the list with stage values.
The JSON keys off specific stage words (Submitted, In Review, Approved, Complete); use these exact words in your choice column or edit the words in the JSON to match yours.
Apply the formatting to the stage column.
It renders a fixed four-stage sequence – Submitted, In Review, Approved, Complete – which you extend by adding stages in the JSON.

How to Apply JSON code

On the Stage column, open the column header menu, choose Column settings, then Format this column.
Switch to Advanced mode.
Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "gap": "0px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "14px",
        "height": "14px",
        "border-radius": "50%",
        "flex-shrink": "0",
        "background-color": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) > 0, '#0f7a3d', if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 0, '#0f6cbd', '#c8c6c4'))",
        "box-shadow": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 0, '0 0 0 4px rgba(15,108,189,0.20)', 'none')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "22px",
        "height": "3px",
        "flex-shrink": "0",
        "background-color": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) > 0, '#0f7a3d', '#c8c6c4')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "14px",
        "height": "14px",
        "border-radius": "50%",
        "flex-shrink": "0",
        "background-color": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) > 1, '#0f7a3d', if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 1, '#0f6cbd', '#c8c6c4'))",
        "box-shadow": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 1, '0 0 0 4px rgba(15,108,189,0.20)', 'none')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "22px",
        "height": "3px",
        "flex-shrink": "0",
        "background-color": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) > 1, '#0f7a3d', '#c8c6c4')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "14px",
        "height": "14px",
        "border-radius": "50%",
        "flex-shrink": "0",
        "background-color": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) > 2, '#0f7a3d', if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 2, '#0f6cbd', '#c8c6c4'))",
        "box-shadow": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 2, '0 0 0 4px rgba(15,108,189,0.20)', 'none')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "22px",
        "height": "3px",
        "flex-shrink": "0",
        "background-color": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) > 2, '#0f7a3d', '#c8c6c4')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "14px",
        "height": "14px",
        "border-radius": "50%",
        "flex-shrink": "0",
        "background-color": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) > 3, '#0f7a3d', if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 3, '#0f6cbd', '#c8c6c4'))",
        "box-shadow": "=if((if(@currentField == 'Submitted', 0, if(@currentField == 'In Review', 1, if(@currentField == 'Approved', 2, if(@currentField == 'Complete', 3, -1))))) == 3, '0 0 0 4px rgba(15,108,189,0.20)', 'none')"
      }
    }
  ]
}

Common Questions About the Workflow Steps

What is the Workflow Steps built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a status column that reads as a progress tracker without ongoing development overhead.

What columns does it need?

It needs one Choice column holding the stage, where the JSON is applied, plus any label column such as the request name. Each stage value maps to a step in the tracker.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can I change the stages?

Yes. The stage names and the number of steps are set in the JSON. Edit them to match your own process, and the dots and connectors adjust to the current stage.

Can Greg build a design like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.