What is Action-Based JSON Formatting?

SharePoint JSON column formatting allows you to customize how columns appear without altering the underlying data. One powerful feature is the ability to add interactive buttons using customRowAction, enabling users to perform actions directly from the list view.

In this scenario, a simplified example is demonstrated that includes only the four most frequently used actions, based on specific business use cases. These actions are representative and can be further customized or extended depending on organizational requirements.

Instead of navigating through action menus, toolbars, or command bars, users can perform key operations directly from each row.

Example Actions Included

Action	Description
Open	Opens the file directly
Edit	Opens the item properties panel
Share	Opens the sharing dialog
Copy Link	Copies the document link

Why Use Action Buttons in Document Libraries?

In the default SharePoint interface:

Users must select an item
Navigate to the command bar or “…” menu
Then select the desired action

This creates multiple steps and can be confusing, especially when:

Users work on different screen resolutions
Command bar options are hidden, collapsed, or not visible
Users are not familiar with SharePoint navigation

Benefits of Inline Action Buttons

Adding action buttons directly against each item provides several advantages:

✔ Reduces the number of clicks
✔ Improves visibility of common actions
✔ Works consistently across different screen sizes
✔ Enhances overall productivity and usability
✔ Minimizes the need for user training

Supported Actions in JSON Formatting

You can create buttons using the customRowAction property. The most commonly used actions include:

CustomRowAction	Details
defaultClick	Open file/item
editProps	Open edit panel
share	Open sharing dialog
copyLink	Copy link
delete	Delete item
openContextMenu	Open full menu
executeFlow	Trigger Power Automate

Implementation Approach

This can be achieved by:

Adding a custom Actions text column (Single line of text)
Applying JSON column formatting
Configuring buttons using supported customRowAction options
For this example, the focus is on the following actions:
- Open (defaultClick)
- Edit (editProps)
- Share (share)
- Copy Link (copyLink)

How the UI Looks

After applying this formatting, each row in the document library will display a horizontal set of action buttons, such as:

Buttons appear inline with each item
Icons provide quick visual identification
Tooltips guide users on hover
Actions can be executed with a single click

JSON Code for Column Formatting

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "gap": "8px"
  },
  "children": [
    {
      "elmType": "button",
      "style": {
        "background-color": "#0078d4",
        "color": "white",
        "border": "none",
        "padding": "4px 8px",
        "border-radius": "4px",
        "cursor": "pointer"
      },
      "attributes": {
        "title": "Open"
      },
      "customRowAction": {
        "action": "defaultClick"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "OpenFile"
          }
        }
      ]
    },
    {
      "elmType": "button",
      "style": {
        "background-color": "#107c10",
        "color": "white",
        "border": "none",
        "padding": "4px 8px",
        "border-radius": "4px",
        "cursor": "pointer"
      },
      "attributes": {
        "title": "Edit"
      },
      "customRowAction": {
        "action": "editProps"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Edit"
          }
        }
      ]
    },
    {
      "elmType": "button",
      "style": {
        "background-color": "#5c2d91",
        "color": "white",
        "border": "none",
        "padding": "4px 8px",
        "border-radius": "4px",
        "cursor": "pointer"
      },
      "attributes": {
        "title": "Share"
      },
      "customRowAction": {
        "action": "share"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Share"
          }
        }
      ]
    },
    {
      "elmType": "button",
      "style": {
        "background-color": "#d83b01",
        "color": "white",
        "border": "none",
        "padding": "4px 8px",
        "border-radius": "4px",
        "cursor": "pointer"
      },
      "attributes": {
        "title": "Copy link"
      },
      "customRowAction": {
        "action": "copyLink"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Link"
          }
        }
      ]
    }
  ]
}

Important Notes

This JSON example is not exhaustive.

It includes only the most frequently used actions, based on my specific business use cases
Additional actions (like delete, flow, or context menu) can be added if needed
The layout and styling can be further customized to meet user experience needs

This JSON formatting example demonstrates how a small set of key actions can significantly improve usability in SharePoint document libraries. By focusing on the most commonly used operations, organizations can provide a faster, more intuitive experience for end users.

Enhancing SharePoint Document Libraries with Action Buttons using JSON Formatting