Is it possible to create buttons for hyperlink fields in a SharePoint modern customized list view?

Question

I have created a list that contains document names, 4 choice fields to select and define what the document is, and 2 hyperlink fields to take the user to the document in either English or French.

So far I have managed to make the document name the header, and two of the choice fields descriptors underneath.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Short_x0020_Description_x0020_of]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Status]"
          },
                    {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Item_x0020_Type]"
          },
                    {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Hazard]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Give feedback",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$Assigned_x0020_To.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

I would like the end result to contain two buttons to the two hyperlinks. I have found code to add buttons or icons for item tasks, but I have not found how to code buttons using values in a hyperlink field.

The end result I am aiming for is an item with the item name header, all choice fields underneath (preferably in a table format, but I haven't found that either) and then two buttons on the right hand side for accessing the document.

I have no idea if this is possible. I have seen many examples with contact lists, but this is very different from that and most fields are choice fields and not text fields as required by the examples I have found on GitHub.

Answer 1

Yes, you can create buttons for hyperlink fields in your SharePoint online modern experience list.

You have to use button element nested inside a element.

For example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "[$ClientSiteURL]",
    "target": "_blank"
  },
  "style": {
    "text-decoration": "none"
  },
  "children": [
    {
      "elmType": "button",
      "txtContent": "Go to Client Data",
      "style": {
        "cursor": "pointer",
        "width": "100%"
      }
    }
  ]
}

Where ClientSiteURL is internal name of hyperlink column. You can get the exact internal name of your columns by following this article: How to find the Internal name of columns in SharePoint Online?

Output:

You can use same logic in your view formatting JSON to show hyperlink fields as buttons.