Approval Stamp

The Approval Stamp turns a plain approval or status column into a bold, rubber-stamp-style mark, so anyone scanning a SharePoint list can see at a glance whether an item is Approved, Rejected, or still pending. It is built with a standard Microsoft List and a small piece of column-formatting JSON. The stamp shows the status word in uppercase inside a colored outline with a matching icon - green for approved, red for rejected, amber for pending - and because it reads the current column, you can drop it on any status field across your sites.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, Date and Time Column, JSON, Person or Group Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders an approval or status value as an outlined, uppercase rubber-stamp mark in a single column
• Color and icon change with the decision – a green check for Approved, a red cross for Rejected, an amber clock for Pending
• An In Review state and a neutral fallback keep the column readable for every value
• Uses the current column, so the same JSON works on any status or choice field without editing
• Pure column-formatting JSON, so nothing about the underlying data changes
• Reads clearly at a glance, replacing a plain status word with a decision people grasp instantly

Common Use Cases

• Document and contract approvals
• Purchase and expense request decisions
• Time-off and leave requests
• Onboarding and access requests
• Content review and publishing sign-off
• Change request approvals

Details

• Design Pattern: Status & Indicator Badges
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data.
3. Because the JSON is applied at the column level, the Approval Status column can use any name you want.
4. The example recognizes Approved, Rejected, Pending, and In Review, with a neutral fallback for any other value – adjust those words in the JSON to match your own choices.

How to Apply JSON code

1. On the Approval Status column, open the column header menu, choose Column settings, then Format this column.
2. Switch to Advanced mode.
3. 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": "inline-flex",
    "align-items": "center",
    "box-sizing": "border-box",
    "justify-content": "center",
    "min-width": "128px",
    "width": "fit-content",
    "max-width": "100%",
    "height": "30px",
    "min-height": "30px",
    "max-height": "30px",
    "padding": "0 8px",
    "margin": "5px 0",
    "border-radius": "5px",
    "font-size": "12px",
    "line-height": "14px",
    "font-weight": "700",
    "letter-spacing": "0.55px",
    "text-transform": "uppercase",
    "overflow": "hidden",
    "border": "='1px solid ' + if(@currentField == 'Approved', '#107c10', if(@currentField == 'Rejected', '#a4262c', if(@currentField == 'Pending', '#8a6d00', if(@currentField == 'In Review', '#005a9e', '#797775'))))",
    "color": "=if(@currentField == 'Approved', '#107c10', if(@currentField == 'Rejected', '#a4262c', if(@currentField == 'Pending', '#8a6d00', if(@currentField == 'In Review', '#005a9e', '#797775'))))",
    "background-color": "=if(@currentField == 'Approved', '#eaf3de', if(@currentField == 'Rejected', '#fdeceb', if(@currentField == 'Pending', '#fdf3d6', if(@currentField == 'In Review', '#e6f1fb', '#f3f2f1'))))"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "=if(@currentField == 'Approved', 'Accept', if(@currentField == 'Rejected', 'Cancel', if(@currentField == 'Pending', 'Clock', if(@currentField == 'In Review', 'View', 'Unknown'))))"
      },
      "style": {
        "margin-right": "5px",
        "font-size": "11px",
        "line-height": "11px",
        "flex-shrink": "0"
      }
    },
    {
      "elmType": "span",
      "style": {
        "line-height": "14px",
        "white-space": "nowrap",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "min-width": "0"
      },
      "txtContent": "@currentField"
    }
  ]
}

Common Questions About the Approval Stamp