How to use JSON to add a clickable button to a modern SharePoint list view

In the SharePoint 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.

{
   "elmType": "a",
   "txtContent": "",
   "attributes": {
      "target": "_blank",
    "iconName": "OpenInNewWindow",
        "class": "sp-field-quickAction",
        "href": {
         "operator": "+",
         "operands": [
            "{enter your site here}/Lists/{list name}/DispForm.aspx?ID=",
            "@currentField"
         ]
      }
   }
}

Of course, the URL can be anything you want. In the above example, I’m linking to the item display form of another list and passing in the ID of the item I want to view. In this case, the item in the field I am using contains the ID of the list item I want open. This can be helpful if you have multiple lists that reference each other or use a lookup. You can also use this approach to trigger Microsoft Flow or other workflows.

The “OpenInNewWindow” is the name of the icon I’m using. You can add your own icon or choose from any predefined icons from the Office UI Fabric site.

Again, you can find some great documentation with many examples provided by Microsoft here