Add Custom Row Actions In SharePoint List Items With Column Formatting

In this article, we will see how to use column formatting options to create action buttons in the SharePoint list view for each row. This can be used to customize SharePoint list view and provide options to perform an action on click. This can be achieved using customRowAction attribute in for button element. Before getting into an example, below are 5 actions available which can be used.

• defaultClick - This will simulate item click event (when list item column like the title is clicked)
• share - Opens a sharing dialog
• delete - Opens a delete dialog confirmation popup
• editProps - Opens item properties windows in edit mode
• executeFlow - run MS flow associated based in Flow id (to be configured in JSON, we will see this in the example below)

First, let us start by creating a list. Add below columns for demo

• Title (default)
• Default Action - Calculated column with formula =""
• Share Action - Calculated column with formula =""
• Delete Action - Calculated column with formula =""
• Edit Action - Calculated column with formula =""
• Call Flow - Calculated column with formula =""

As we don't want these columns to be added in List add/edit form, we will create this as a calculated column with an empty string.

 

Below is an example of the column 'Default Action':

 

 

Once you create all the columns, the list would look something like this.

 

Default Action 

 

To apply column formatting to this column, we have 2 options:

 

Option 1

 

Go to List settings, select targeted column settings. In column settings, we will find Column formatting option at the end.

 

 

Option 2

 

Inside list view, select header arrow in the targeted column and follow the below steps.

 

 

Add this JSON for default action. 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "defaultClick"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
    "title": "Open Item"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "OpenPane",
        "class": "ms-font-xxl"
      }
    }
  ]
}

Open list view again and we should see the below output.

 

 

Share action 

 

Edit column and add the below JSON for Share action.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "share"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
    "title": "Share Item"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Share",
        "class": "ms-font-xxl"
      }
    }
  ]
}

Output

 

 

 

Delete action

 

Edit column and add the below JSON for Delete action, delete button will be added like arrow marked in the screenshot and on click of it, the confirmation dialog will open.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "delete"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
    "title": "Delete Item"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Delete",
        "class": "ms-font-xxl"
      }
    }
  ]
}

Output

Edit action 

 

Edit column and add the below JSON for Edit action. This will open the edit form.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "editProps"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
    "title": "Edit Item"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Edit",
        "class": "ms-font-xxl"
      }
    }
  ]
}

output

 

Call flow 

 

Edit column and add below JSON for Call flow action, this will open Start MS flow dialog.

 

To obtain a Flow's ID,

1. Click Flow > See your flows in the SharePoint list where the Flow is configured
2. Click on the Flow you want to run
3. Copy the ID from the end of the URL

Please note here you need to replace actionParams id attribute with your actual MS Flow id. 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\":\"2cabd779-a135-420a-90f8-461d56e83fd0\", \"headerText\":\"It's Flow Time!\",\"runFlowButtonText\":\"Do it\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
    "title": "Launch Flow"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow",
        "class": "ms-font-xxl"
      }
    }
  ]
}

output

 

 

That's it, this is how we can create custom row actions buttons and add to SharePoint list view. This is an easy way to add button in SharePoint list view rather than using field customizer or creating custom list views to provide row actions to automate any business process.

 

This article is inspired from here.

 

Thanks to @thechriskent for the sample and demo in the community call of April 18, 2019.