Action Buttons (Column JSON)
Overview
- Renders a row of one-click buttons – Email, Call, and Open – right inside a list column
- Wires each button to that row’s own fields, so Email opens a message to that person and Call dials that number
- Hides any button whose field is empty, so a row never shows a button that goes nowhere
- Uses a filled primary button for Email and outlined buttons for the secondary actions, for a clear hierarchy
- Applied as column-formatting JSON on a spare column, so it adds actions without changing the underlying data
- Easy to relabel, recolor, or swap the actions – for example a Teams chat or a Power Automate flow link
Common Use Cases
- A staff or contact directory
- A vendor or supplier list
- A support or escalation contact list
- A sales lead or account list
- A resource list with quick links
- A site or equipment inventory with a details link
Details
- Design Pattern: Cards & Tiles
- Format Scope: Column
Required Columns
| Display name | Column type | Internal name |
|---|---|---|
| Contact | Single line of text | [Title] |
| Single line of text | [Email] | |
| Phone | Single line of text | [Phone] |
| Link | Hyperlink | [Link] |
| Actions | Single line of text | [Actions] |
Prerequisites
- Build a list with these columns before you paste the JSON.
- Then populate the email, phone, and link for each row – leave the Actions column empty, as it only hosts the buttons.
- Internal column names (in brackets) must match the JSON exactly.
How to Apply JSON code
- Select the Actions column header, then Column settings, then Format this column.
- Switch to Advanced mode.
- Paste the JSON below and click Save.
- Widen the Actions column so the buttons sit on one line.
JSON Code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
"gap": "8px",
"align-items": "center",
"padding": "4px 0"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "=('mailto:' + [$Email])",
"target": "_blank",
"title": "=('Email ' + [$Title])"
},
"style": {
"display": "=if([$Email] == '', 'none', 'inline-flex')",
"align-items": "center",
"gap": "6px",
"padding": "7px 14px",
"border-radius": "18px",
"background-color": "#0f6cbd",
"color": "#ffffff",
"font-size": "13px",
"font-weight": "600",
"line-height": "18px",
"text-decoration": "none",
"cursor": "pointer"
},
"txtContent": "✉ Email"
},
{
"elmType": "a",
"attributes": {
"href": "=('tel:' + [$Phone])",
"title": "=('Call ' + [$Title])"
},
"style": {
"display": "=if([$Phone] == '', 'none', 'inline-flex')",
"align-items": "center",
"gap": "6px",
"padding": "7px 14px",
"border-radius": "18px",
"background-color": "#ffffff",
"border": "1px solid #0f6cbd",
"color": "#0f6cbd",
"font-size": "14px",
"font-weight": "600",
"line-height": "18px",
"text-decoration": "none",
"cursor": "pointer"
},
"txtContent": "📞 Call"
},
{
"elmType": "a",
"attributes": {
"href": "[$Link]",
"target": "_blank",
"title": "Open link"
},
"style": {
"display": "=if([$Link] == '', 'none', 'inline-flex')",
"align-items": "center",
"gap": "6px",
"padding": "7px 14px",
"border-radius": "18px",
"background-color": "#ffffff",
"border": "1px solid #c8c6c4",
"color": "#201f1e",
"font-size": "13px",
"font-weight": "600",
"line-height": "18px",
"text-decoration": "none",
"cursor": "pointer"
},
"txtContent": "↗ Open Link"
}
]
}Common Questions About the Action Buttons
What is the Action Buttons example built with?
It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON applied to a spare 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 quick actions in a list without ongoing development overhead.
What columns does it need?
It needs the fields the buttons point to – an email, a phone number, and a link – plus a spare column to host the buttons. The buttons refer to those fields by their internal names, so the JSON and the columns must line up – in this example those internal names are Email, Phone, and Link.
What happens if a row has no phone or link?
The button simply does not appear. Each button checks its own field and hides itself when that field is empty, so a contact with only an email shows just the Email button and the row never displays a link that goes nowhere.
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 an existing column looks and where its links point, 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 Greg build action buttons like this for our lists?
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 lists.
