Status Header Banner (Form Configuration)
Overview
- Shows the item’s status as a colored banner at the top of the form
- The banner color and icon change with the status value
- Makes the state of a request obvious the moment the form opens
- Reads the status choice column directly, so it stays in sync
- Applied as form-configuration JSON in the header, so it changes nothing about the data
- Works on any status choice column
Common Use Cases
- Approval request forms
- Service or help desk tickets
- Onboarding and offboarding
- Change or release requests
- Case management forms
- Any form with a status field
How to Apply JSON Formatting
1. Open the list, then open any item to show its form.
2. At the top of the form, expand the Edit form (pencil) icon and choose Configure layout.
3. In the Apply formatting to dropdown, choose Header.
4. Paste the JSON below into the box, preview, and click Save.
JSON Code – Select, Copy and Paste
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"width": "100%",
"box-sizing": "border-box",
"padding": "12px 16px",
"border-radius": "8px",
"margin-bottom": "14px",
"background-color": "=if([$Status] == 'Draft', '#f3f2f1', if([$Status] == 'Submitted', '#eaf2fb', if([$Status] == 'In Review', '#fdf3d6', if([$Status] == 'Approved', '#e7f3e8', if([$Status] == 'Rejected', '#fdeceb', '#f3f2f1')))))"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if([$Status] == 'Approved', 'CompletedSolid', if([$Status] == 'Rejected', 'StatusErrorFull', 'InfoSolid'))"
},
"style": {
"font-size": "20px",
"margin-right": "12px",
"color": "=if([$Status] == 'Draft', '#605e5c', if([$Status] == 'Submitted', '#0b5cab', if([$Status] == 'In Review', '#7a5c00', if([$Status] == 'Approved', '#0b6a0b', if([$Status] == 'Rejected', '#a4262c', '#605e5c')))))"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "12px",
"font-weight": "600",
"letter-spacing": "1px",
"margin-bottom": "3px",
"color": "=if([$Status] == 'Draft', '#605e5c', if([$Status] == 'Submitted', '#0b5cab', if([$Status] == 'In Review', '#7a5c00', if([$Status] == 'Approved', '#0b6a0b', if([$Status] == 'Rejected', '#a4262c', '#605e5c')))))",
"text-transform": "uppercase"
},
"txtContent": "Current status"
},
{
"elmType": "div",
"style": {
"font-size": "17px",
"font-weight": "700",
"letter-spacing": "0.3px",
"color": "=if([$Status] == 'Draft', '#605e5c', if([$Status] == 'Submitted', '#0b5cab', if([$Status] == 'In Review', '#7a5c00', if([$Status] == 'Approved', '#0b6a0b', if([$Status] == 'Rejected', '#a4262c', '#605e5c')))))"
},
"txtContent": "[$Status]"
}
]
}
]
}Common Questions About the Status Header Banner
What is the Status Header Banner built with?
It is built with a standard Microsoft List (SharePoint list) and form-configuration JSON applied to the form header. 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 status on their forms without ongoing development overhead.
What column does it need?
It reads a status choice column on the item, such as one with Draft, Submitted, In Review, Approved, and Rejected. The banner colors itself from that value, so it works with whatever status field your form uses.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint form configuration, 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 an existing form looks, 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 change the colors or statuses?
Yes. The status-to-color map is a short list in the JSON, so you can rename statuses, add new ones, or change the colors to match your process and brand.
Can Greg build form formatting like this for our team?
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 form formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your forms.
