Shut up and just give me MORE useful JSON scripts!

More of used and tested JSON scripts that you can use now

Most of these will need some tweaking, but you should be able to adapt these to your own usage.
The advantage of using these scripts is that changes and outputs are always instant and doesn't rely on other processes to reflect changes.
This script changes your plain text columns into dynamic, color-coded visual badges with icons. Best used when combined with clickable buttons, as per previous article.

High degree of customisation is available and necessary.

  • Red - Replace this with your column field name. This is necessary for the flow to work.

  • Green - Replace these with your own three state wording if these do not suit you. Can be anything, but make sure they are replicated in both the 1st and 2nd row.

  • Blue - Customise this to adjust the physical look of the pills.

SharePoint Column Formatting: Status Pill with Icons

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div", "attributes": {
"class": "=if(@yourField == 'Approved', 'sp-field-severity--good', if(@yourField == 'In Progress', 'sp-field-severity--warning', if(@yourField == 'Rejected', 'sp-field-severity--blocked', 'sp-field-severity--low')))"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(@yourField == 'Approved', 'CheckMark', if(@yourField == 'In Progress', 'Sync', if(@yourField == 'Rejected', 'ErrorBadge', 'Edit')))"
},
"style": { "margin-right": "6px" }
},
{
"elmType": "span",
"txtContent": "@yourField"
}
],
"style": {
"display": "inline-flex",
"align-items": "center",
"padding": "4px 12px",
"border-radius": "16px"
}
}
json, json scripts, json customisation, column customisation, column formatting
json, json scripts, json customisation, column customisation, column formatting
Final Result
Will display:
  • Approved - A green pill container with a white checkmark icon "checkmark" and the text "Approved".
  • In Progress - A yellow/amber pill container with a sync/refresh icon "circlearrowright" and "In Progress".
  • Rejected - A red pill container with an alert/error badge "exclamation mark" and "Rejected".

Adds a button you can click directly inside list rows. Clicking it launches Outlook in-built address to the item owner (or triggers an automated action) while displaying a very professional blue button.

Quick Action Button (Send Email / Trigger Flow)

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"style": {
"background-color": "#0078d4",
"color": "#ffffff",
"border": "none",
"border-radius": "4px",
"padding": "6px 12px",
"cursor": "pointer",
"display": "inline-flex",
"align-items": "center",
"gap": "6px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Mail"
}
},
{
"elmType": "span",
"txtContent": "Contact Assigned"
}
]
}
json, json scripts, json customisation, column customisation, column formatting
json, json scripts, json customisation, column customisation, column formatting
Change the "Contact Assigned" wording to something more suited to what you want. Also, feel free to adjust the pixel dimension, but be aware that changing these settings may affect your row height which may not look great.

The blue section is the style, which can be adjusted to suit. Obviously, this adjusts the physical look and feel of the label.
Final Result
This code creates a progress bar visual that we all know and love. It's based on figures underlying the in the cell and shows your diagrammatically the progress.

The only other way you can get this is probably doing a pivot table or doing a Tableau graph, so it's pretty good to be able to both create a progress measurement, as well as a decorative bar to show the progress as well.

Creating a Progress bar

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"width": "100%",
"background-color": "#e1dfdd",
"border-radius": "12px",
"overflow": "hidden",
"display": "flex",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"style": {
"width": "=if(@yourField > 100, '100%', toString(@yourField) + '%')",
"background-color": "=if(@yourField >= 100, '#107c41', if(@yourField >= 50, '#0078d4', '#d13438'))",
"height": "20px",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"transition": "width 0.3s ease-in-out"
},
"children": [
{
"elmType": "span",
"txtContent": "=toString(@yourField) + '%'",
"style": {
"color": "#ffffff",
"font-size": "11px",
"font-weight": "bold",
"padding": "0 6px"
}
}
]
}
]
}
json, json scripts, json customisation, column customisation, column formatting
json, json scripts, json customisation, column customisation, column formatting
Final Result
The result is pretty good and shows clearly a progress bar that can be adjusted to whatever colour scheme and font that you prefer. The progress bar will remain blank until the indicator "yourField" is present. It will also adjust automatically if this figure is changed without delays that you would get if you did this through Power Automate.