Use JSON to add a clickable button to a modern SharePoint list view

Eric Gregorich
Updated 6/20/2021: Updated JSON code snippets, icons, and resources.

In the SharePoint Online modern list and libraries views, you can pretty easily add custom formatting and even custom buttons that, when clicked, take the user to other places or trigger other actions.

You can find all of the details about how to do this here. Here is a quick breakdown.

  1. Create a column or choose a column that will be used for your button.
  2. Open the button properties in the list settings or content type settings.
  3. Enter the JSON in the Custom Formatting box.

Here is an example snippet that you can start with.

Open Panel

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "editProps"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "font-size": "30px"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "OpenPane"
      }
    }
  ]
}

Create a button to launch a Power Automate Flow

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "Send to Manager"
    }
  ]
}

Additional Resources

Use column formatting to customize SharePoint
Customize how fields in SharePoint lists and libraries are displayed by constructing a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements.
Home - Fluent UI
The official front-end framework for building experiences that fit seamlessly into Microsoft 365.