Json formatting sharepoint list link inside gallery

Question

I am trying to create a sharepoint list and customizing the json format of this list to make it look nice. I have decided to go with the gallery layout, would like to show a link to bring my users to a pdf where more information is listed.

The issue i have is when i click on the link, instead of bringing me to the url I want it bring me to Item property of the list.

This is my json format

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 73,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!JobDescription.DisplayName]"
              },
              {
                "elmType": "a",
                "attributes": {
                  "href": "[$JobDescription]",
                  "target": "_blank"
                },
                "txtContent": "=if ([$JobDescription] == '', '–', 'Link' )"
              }
            ]
          }
        ]
      }
    ]
  }
}

This is the end result

But when I click on link, instead of bring to my url it bring me to the Item properties box, which is not what I would like.

Answer 1

The issue is that the default wizard adds a button that sits above the card that handles opening the item on click. This is accomplished with the sp-card-defaultClickButton class and associated action. To remove this you can take away this element from your format:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 73,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!JobDescription.DisplayName]"
              },
              {
                "elmType": "a",
                "attributes": {
                  "href": "[$JobDescription]",
                  "target": "_blank"
                },
                "txtContent": "=if ([$JobDescription] == '', '–', 'Link' )"
              }
            ]
          }
        ]
      }
    ]
  }
}