1

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

enter image description here

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.

enter image description here

1 Answer 1

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' )"
              }
            ]
          }
        ]
      }
    ]
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.