Form formattingSharePoint Online

Workflow Progress Header

This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Apr 19, 2024

Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-wrap": "wrap",
    "flex-direction": "row",
    "justify-content": "space-evenly",
    "width": "100%"
  },
  "attributes": {
    "class": "ms-fontSize-18"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "margin": "20px",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Process 1",
          "style": {
            "margin-bottom": "10px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "10px"
          },
          "attributes": {
            "iconName": "=if(Number([$Date1]) == 0 ,'CircleShapeSolid' , 'CompletedSolid')",
            "class": "='ms-fontSize-42' + if(Number([$Date1]) == 0 ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=[$Date1.displayValue]"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "margin": "20px",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Process 2",
          "style": {
            "margin-bottom": "10px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "10px"
          },
          "attributes": {
            "iconName": "=if(Number([$Date2]) == 0 ,'CircleShapeSolid' , 'CompletedSolid')",
            "class": "='ms-fontSize-42' + if(Number([$Date2]) == 0 ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=[$Date2.displayValue]"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "margin": "20px",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Process 3",
          "style": {
            "margin-bottom": "10px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "10px"
          },
          "attributes": {
            "iconName": "=if(Number([$Date3]) == 0 ,'CircleShapeSolid' , 'CompletedSolid')",
            "class": "='ms-fontSize-42' + if(Number([$Date3]) == 0 ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=[$Date3.displayValue]"
        }
      ]
    }
  ]
}

{
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-wrap": "wrap",
    "flex-direction": "row",
    "justify-content": "space-evenly",
    "width": "100%"
  },
  "attributes": {
    "class": "ms-fontSize-18"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "margin": "20px",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Process 1",
          "style": {
            "margin-bottom": "10px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "10px"
          },
          "attributes": {
            "iconName": "=if(Number([$Date1]) == 0 ,'CircleShapeSolid' , 'CompletedSolid')",
            "class": "='ms-fontSize-42' + if(Number([$Date1]) == 0 ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=[$Date1.displayValue]"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "margin": "20px",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Process 2",
          "style": {
            "margin-bottom": "10px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "10px"
          },
          "attributes": {
            "iconName": "=if(Number([$Date2]) == 0 ,'CircleShapeSolid' , 'CompletedSolid')",
            "class": "='ms-fontSize-42' + if(Number([$Date2]) == 0 ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=[$Date2.displayValue]"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "margin": "20px",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Process 3",
          "style": {
            "margin-bottom": "10px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "10px"
          },
          "attributes": {
            "iconName": "=if(Number([$Date3]) == 0 ,'CircleShapeSolid' , 'CompletedSolid')",
            "class": "='ms-fontSize-42' + if(Number([$Date3]) == 0 ,' ms-fontColor-neutralTertiary' , ' ms-fontColor-success')"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=[$Date3.displayValue]"
        }
      ]
    }
  ]
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit.

screenshot of the sample

Form requirements

Type	Internal Name	Required
Date and Time	Date1	No
Date and Time	Date2	No
Date and Time	Date3	No

Sample

Solution	Author(s)
workflow-progress-header.json	Tetsuya Kawahara

Version history

Version	Date	Comments
1.0	February 1, 2021	Initial release
1.1	April 19, 2024	Fixed to use `[$ColumnName.displayValue]` instead of `toLocaleDateString` operator to solve the problem that date is not displayed depending on the date format.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Get this format

How to use this sample

Summary

Form requirements

Sample

Version history

Disclaimer

More formats like this

Countdown Timer Header

Two Column Logo Header

Send Meeting Invite with Microsoft Teams