SharePoint lists custom View and Edit Buttons using JSON Formatting

15 comments

If you need to add custom buttons as below to open SharePoint Online forms from list items (with the same behaviour as if you opened them using the out-of-the-box options), you can add them easily by using list formatting JSON, as below:

The main point here is to add a customRowAction element to a JSON template. This row action will allow you to call several list item out-of-the-box actions from the custom button/HTML element. For the edit button (launches a list form in edit mode) you can use the ‘edit action, and for the view one (launches a list form in display only mode) you can use the defaultClick action.

To use those buttons you need simply to add a ‘dummy’ column to your SharePoint list/view to work as a placeholder for the buttons (I normally use a calculated column so it never appear in forms), and then you can reuse the below as JSON template for the columns, for each button:

Edit

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

View

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "defaultClick"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "View"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "View"
    }
  ]
}

When clicking the buttons, the list view form will be opened:

Hope the templates are helpful!

Tags

15 comments

  2. Hi Michel,
    this is a great feature. Thanks for sharing.
    I have a question to the Edit button.
    Once you finish your changes in the form and hit Save button, the form goes away.
    Is there a way to adjust the json so the form would stayed open in read mode and user could then click on Edit all (the OOB) form button to continue editing again?

    1. Hey Syd,
      Not using list formatting. You can do it when you customise the list form with Power Apps.
      Edit the OnSucess event of the Form and remove the ‘RequestHide()’ function from it, the form will stay open after saved.

  3. This is what I need however, can’t seem to get it working. I added a column named “Edit Details” FYI no example column name provided so it hard to understand if column name its tied to JSON script or can be any name. Any ideas what could be the issue, sorry really new to JSON stuff.

  4. Never mind I found it, I did not switch to Column Formatting. Recommend you add it bold letters above 🙂 Thanks very much for this it’s just what I needed.

  5. Hi Michel,
    very helpful and a long missing function in SharePoint. Thanks a lot.
    My Json skills are not so good. But it is possible to have both buttons in one column?

  7. HI Mchel,
    have you been able to create the “view” button in a document library to open a customized form? I can open the form in edit mode using the “editProps” action, but not able to open in view mode (for read only visitors).
    Thanks
    Lutz

  8. Hi Michel,
    I have a few things to understand, May you have explained them but I can’t catch them sorry. I have created an HR-automated workflow by using SharePoint list, power Apps and power automate. I have made forms by using power Apps and now I want to publish these power Apps forms to anyone an external user via browser links or other social accounts links. How I can do this with security? Is it possible to share that form link only? How can I change the setting to anyone and At the same time all other data would remain secure? Can you please guide me? I’ll be very thankful. I’ll be waiting for your response intensely.
    Thanks a lot.

    1. Hi Aro,
      Unfortunately you won’t be able to share this custom form publicly to be used anonymously or with social accounts, you could only share a SharePoint item or Canvas App with users from other M365 tenants (if allowed by your organisation)…Let me know if you have any question

  9. Hi Michel,
    This is so helpful – thank you for sharing!
    The Edit button works perfectly when I am in the Library, however, when I add the Library as a Web Part for a SharePoint page it will not open the form for the user to edit their document properties. Any idea if this is possible, or possible work arounds?
    Thanks!

    1. Hi Jeff,

      This is a known limitation as of now, it works only directly from the SharePoint views, not from the WebOarts.

Comments are closed.