SharePoint List JSON - embedding tile view of list yields javascript:void(0)

Question

Using the following code, the embedded list web part links (tiles) don't work and show javascript:void(0), while the tiles work fine on the source page.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 375,
  "width": 240,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation",
          "href": "[$Link]"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "display": "=if([$Graphic] == '', 'none', '')"
                        },
                        "attributes": {
                          "src": "[$Graphic]",
                          "title": "[$Graphic.desc]",
                          "class": "sp-card-imagePreview"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "style": {
                  "word-break": "normal"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Note]"
                },
                "style": {
                  "word-break": "normal"
                },
                "txtContent": "=if ([$Note] == '', '–', [$Note])"
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 1

I'm glad to hear you solve the problem and make a brief summary. If you have any remaining issue about this question, you are welcome to discuss in this post.

By the way, since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others.". You could click the "Accept Answer" button for this summary to close this thread, and this can make it easier for other community member's to see the useful information when reading this thread. Thanks for your understanding!

[SharePoint List JSON - embedding tile view of list yields javascript:void(0)]

Issue Symptom:

OP used the following code, the embedded list web part links (tiles) don't work and show javascript:void(0), while the tiles work fine on the source page.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 375,
  "width": 240,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation",
          "href": "[$Link]"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "display": "=if([$Graphic] == '', 'none', '')"
                        },
                        "attributes": {
                          "src": "[$Graphic]",
                          "title": "[$Graphic.desc]",
                          "class": "sp-card-imagePreview"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "style": {
                  "word-break": "normal"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Note]"
                },
                "style": {
                  "word-break": "normal"
                },
                "txtContent": "=if ([$Note] == '', '–', [$Note])"
              }
            ]
          }
        ]
      }
    ]
  }
}

Current status:

OP discovered that the issue was human error. Though not visible, I needed to select display Link.

Answer 2

I apply provided JSON codes in the list gallery view. It formats well both in the list gallery view and embedded list web part.

Here are my steps for you refer to:

1.Apply provided JSON codes in the list gallery view.

2.Embedded list web part.

3.Result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.