Add action buttons per row in the document library / List to minimize clicks

To improve usability and reduce the number of clicks for end users, we can add inline action buttons (such as Open, Edit, Share, and Copy Link) directly against each item in the SharePoint document library using JSON column formatting.

This approach allows users to access commonly used actions with a single click, instead of navigating through the command bar or context menu.

JSON Formatting (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"
          }
        }
      ]
    }
  ]
}