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.
Change your plain text columns into dynamic, color-coded visual badges with icons. Best used when combined with clickable buttons, as per previous article.

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(@currentField == 'Approved', 'sp-field-severity--good', if(@currentField == 'In Progress', 'sp-field-severity--warning', if(@currentField == 'Rejected', 'sp-field-severity--blocked', 'sp-field-severity--low')))"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(@currentField == 'Approved', 'CheckMark', if(@currentField == 'In Progress', 'Sync', if(@currentField == 'Rejected', 'ErrorBadge', 'Edit')))"
},
"style": { "margin-right": "6px" }
},
{
"elmType": "span",
"txtContent": "@currentField"
}
],
"style": {
"display": "inline-flex",
"align-items": "center",
"padding": "4px 12px",
"border-radius": "16px"
}
}
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"
}
]
}
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.
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.

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(@currentField > 100, '100%', toString(@currentField) + '%')",
"background-color": "=if(@currentField >= 100, '#107c41', if(@currentField >= 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(@currentField) + '%'",
"style": {
"color": "#ffffff",
"font-size": "11px",
"font-weight": "bold",
"padding": "0 6px"
}
}
]
}
]
}
Change the red items to suit, as well as the other aspects like fonts, weight, and justification.