SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Approval Status Icons and Colors

This sample demonstrates how to change icons and colors based on the value in the Approval Status column.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Jun 4, 2023

Approval Status Icons and Colors formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

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.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "flex-start",
        "margin": "7px 0px",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row",
            "align-items": "center",
            "padding": "3px",
            "border-radius": "20px",
            "border": "=if(Number(@currentField)==0,'1px solid','')"
          },
          "attributes": {
            "class": "=if(Number(@currentField)==0,'ms-bgColor-white',if(Number(@currentField)==1,'ms-bgColor-sharedBlueMagenta10',if(Number(@currentField)==2,'ms-bgColor-sharedRed10','ms-bgColor-tealLight')))"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "padding": "4px",
                "border-radius": "50%",
                "font-weight": "bold"
              },
              "attributes": {
                "iconName": "=if(Number(@currentField)==0,'CalculatorSubtract',if(Number(@currentField)==1,'Forward',if(Number(@currentField)==2,'Cancel','Accept')))",
                "class": "='ms-fontSize-10 ms-bgColor-white '+if(Number(@currentField)==0,'',if(Number(@currentField)==1,'ms-fontColor-sharedBlueMagenta10',if(Number(@currentField)==2,'ms-fontColor-sharedRed10','ms-fontColor-teal')))"
              }
            },
            {
              "elmType": "div",
              "txtContent": "[$_ApprovalStatus]",
              "style": {
                "padding": "0px 7px"
              },
              "attributes": {
                "class": "=if(Number(@currentField)==0,'','ms-fontColor-white')"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "align-items": "center",
            "margin-top": "2px"
          },
          "customRowAction": {
            "action": "openApprovalDialog"
          },
          "attributes": {
            "class": "ms-Link"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "Approval Details"
            },
            {
              "elmType": "span",
              "style": {
                "margin-left": "4px"
              },
              "attributes": {
                "iconName": "OpenInNewWindow"
              }
            }
          ]
        }
      ]
    }
  ]
}
View sourceLink to this definitionapproval-status-icon-color-with-approvals.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /children/0/children/1/customRowAction/action must be equal to one of the allowed values
  • /children/0/children/1/customRowAction must match a schema in anyOf

From the contributor

How to use this sample

Summary

This sample demonstrates how to change icons and colors based on the value in the Approval Status column. Changing the icon and color for each Approval Status column value allows for a more visual understanding of the status.

screenshot of the sample

The values displayed in Approval Status column are different depending on the display language.

screenshot of the language difference

There are also two samples, each described below.

approval-status-icon-color-content-approval.json

approval-status-icon-color-content-approval.json is a sample that can be applied to the Approval Status column with the internal column name of _ModerationStatus when content approval is set as required.

screenshot of the content approval

The following table shows the icons and CSS classes for each value in the Approval Status column.

Approval Status Icon Name Background color related CSS class
0 (Approved) Accept ms-bgColor-tealLight
1 (Rejected) Cancel ms-bgColor-sharedRed10
2 (Pending) Forward ms-bgColor-sharedBlueMagenta10
3 (Draft) CalculatorSubtract ms-bgColor-white
4 (Scheduled) EventAccepted ms-bgColor-blue

approval-status-icon-color-with-approvals.json

approval-status-icon-color-with-approvals.json is a sample that can be applied to the Approval status column with the internal column name _ApprovalStatus created when the Approvals in Lists feature is enabled.

screenshot of the approvals in lists feature

Since the Approvals in Lists feature is also enabled for the "Travel Request with Approval" and "Content Scheduler with Approval" list templates, this sample is also available for these templates.

screenshot of the list templates

The following table shows the icons and CSS classes for each value in the Approval Status column.

Approval Status Icon Name Background color related CSS class
0 (Not Submitted) CalculatorSubtract ms-bgColor-white
1 (Requested) Forward ms-bgColor-sharedBlueMagenta10
2 (Rejected) Cancel ms-bgColor-sharedRed10
3 (Approved) Accept ms-bgColor-tealLight

When you click on "Approval Details," the "Request approval" dialog or the "Approval request details" dialog will appear.

screenshot of the approval dialog

View requirements

  • approval-status-icon-color-content-approval.json can be applied to the Approval Status column with the internal column name of _ModerationStatus when content approval is set as required.
  • approval-status-icon-color-with-approvals.json can be applied to the Approval status column with the internal column name _ApprovalStatus, which is created when the Approvals in Lists feature is enabled.

Sample

Solution Author(s)
approval-status-icon-color.json Tetsuya Kawahara
approval-status-icon-color-with-approvals.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 June 4, 2023 Initial release
1.1 May 22, 2024 Added a note to README.md about the Approvals in Lists feature

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.

Additional notes

  • Approvals in Lists feature has not yet been deployed as of May 22, 2024 and some tenants may not be able to activate the feature.

Keep exploring

More formats like this

Missing Information Callout

The Missing Information Callout column formatter provides a clear, accessible visual indicator when a SharePoint list column contains no value.

Explore format

Publishing Status

Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages

Explore format

File Preview Callout with the embed Action

This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.

Explore format