SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Inline Approval

Creates buttons to approve/reject an item by updating an Approval Status field created using a choice field, and also set the value of a person field to the user who took the action by using the setValue action.

Get this format View on GitHub

Shared by Michel Mendes
Updated Nov 19, 2021

Inline Approval formatting preview
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.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-directon": "row",
    "justify-content": "left",
    "align-items": "center",
    "flex-wrap": "nowrap"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "=if([$ItemStatus] == 'Pending' || [$ItemStatus] == '', 'inherit','none')",
        "flex-directon": "row",
        "justify-content": "left",
        "align-items": "center",
        "flex-wrap": "wrap"
      },
      "children": [
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Approved",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
          },
          "style": {
            "border": "none",
            "background-color": "transparent",
            "cursor": "pointer",
            "display": "flex",
            "flex-directon": "row",
            "justify-content": "left",
            "align-items": "center",
            "flex-wrap": "wrap"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "iconName": "SkypeCircleCheck"
              },
              "style": {
                "padding": "4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "Approve",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        },
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Rejected",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
          },
          "style": {
            "border": "none",
            "background-color": "transparent",
            "cursor": "pointer",
            "display": "flex",
            "flex-directon": "row",
            "justify-content": "left",
            "align-items": "center",
            "flex-wrap": "wrap"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "iconName": "Blocked"
              },
              "style": {
                "padding": "4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "Reject",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "span",
          "txtContent": "='This item is ' + toLowerCase([$ItemStatus])",
          "style": {
            "display": "=if([$ItemStatus] == 'Pending' ||[$ItemStatus] == '' , 'none','inherit')",
            "padding-left": "5px",
            "word-break": "keep-all"
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitionapproval-buttons-setValue-status-user.json

From the contributor

How to use this sample

Summary

This sample creates buttons to approve/reject an item by updating an Approval Status field created using a choice field, and also set the value of a person field to the user who took the action by using the setValue action as seen below:

screenshot of the sample

Key points:

  • For the buttons, the CSS display property will be set to 'none' when the status is not empty and is different than 'Pending'. And the custom JSON will display a text message stating that the item was already approved or rejected in this case.
  • When the item is not approved or rejected yet, the buttons are displayed so the user can take an action (Approve or Reject).

View requirements

Type Internal Name Required Additional Information
Any (see below) Approval Yes Apply approval-buttons-setValue-status-user.json to this column
Choice ItemStatus No Choice values needed: (Pending / Approved / Rejected) Default: Pending
Person or Group ApprovalActionBy No Single selection
  • The format can be applied to any column, although it is recommended to add it to a calculated column with a ="" formula

Sample

Solution Author(s)
approval-buttons-setValue-status-user.json Michel Mendes

Version history

Version Date Comments
1.0 November 19, 2021 Initial release

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.

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

Country Flag

This sample demonstrates displaying the flag of the country selected in the single selection SharePoint choice column.

Explore format