Approval Status Badge (Column Formatting)
Overview
- Shows the approval status as a colored pill
- Each value gets its own color – Draft, In Review, Approved, Rejected
- Makes the state of every document obvious at a glance
- Reads the choice column directly, so it stays in sync with the value
- Applied as column-formatting JSON, so it changes nothing about the files
- Works on any status choice column
Common Use Cases
- Document approval workflows
- Policy review and sign-off
- Contract status tracking
- Content publishing pipeline
- Quality or compliance review
- Any library with a review status
How to Apply JSON Formatting
1. Open your document library and add a Choice column named Approval Status (Draft, In Review, Approved, Rejected).
2. On the Approval Status column, open the column header menu, choose Column settings, then Format this column.
3. Switch to Advanced mode, paste the JSON below, and click Save.
JSON Code – Select, Copy and Paste
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"justify-content": "center",
"box-sizing": "border-box",
"height": "28px",
"width": "100%",
"max-width": "118px",
"padding": "2px 8px",
"margin": "3px 0",
"border-radius": "8px",
"background-color": "=if(@currentField == 'Draft', '#eeeeee', if(@currentField == 'In Review', '#ffe8a3', if(@currentField == 'Approved', '#d6f0dc', if(@currentField == 'Rejected', '#ffd6d9', '#eeeeee'))))"
},
"children": [
{
"elmType": "span",
"style": {
"font-size": "12px",
"font-weight": "600",
"line-height": "16px",
"white-space": "nowrap",
"color": "=if(@currentField == 'Draft', '#323130', if(@currentField == 'In Review', '#6f4e00', if(@currentField == 'Approved', '#007000', if(@currentField == 'Rejected', '#a80000', '#323130'))))"
},
"txtContent": "@currentField"
}
]
}Common Questions About the Approval Status Badge
What is the Approval Status Badge built with?
It is built with a standard SharePoint document library and a small piece of column-formatting JSON applied to a status choice column. 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 clear document status without ongoing development overhead.
What column does it need?
It needs a Choice column – in this example called Approval Status – holding values such as Draft, In Review, Approved, and Rejected. The badge reads the current column, so it works on whatever status field your library uses.
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 existing columns and views look, 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 use my own status values and colors?
Yes. The value-to-color map is a short list in the JSON, so you can rename the statuses, add new ones, or change the colors to match your process and brand.
Can Greg build this for our library?
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 library.
