SharePoint modern view formatting with JSON: URL returns void

Question

I'm trying to format a List in SharePoint modern view. When clicking on the the URL "Bekijk recept" I get a javascript:void(0); instead of opening the URL.

Here you can see some of the code:

"elmType": "a",
        "txtContent": "Bekijk recept",
        "style": {
          "border": "none",
          "padding-top": "32px",
          "background-color": "transparent",
          "color": "#0078d7",
          "padding-left": "0px",
          "text-align": "left",
          "cursor": "pointer"
        },
        "attributes": {
          "target": "_blank",
          "href": "[$Linkrecept]"

[$Linkrecept] refers to a hyperlink column.

Any ideas why this doesn't work? How can I make the navigation work?

Answer 1

Based on MS Document at here, Column formatting Supports for static hyperlinks that do not launch script. You may need to use Field Customizer with SPFx that Supports for any hyperlink, including those that invoke custom script

Answer 2

I can see that there is no error in your code. Few thinks to check:

1. Make sure you are using correct internal name of your hyperlink field at [$Linkrecept]. You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?
2. Make sure there is value in your hyperlink field. If field is blank then it will show a link as javascript:void(0);.

Workaround for 2nd case is to make your hyperlink field required OR you can set the default URL in your code if hyperlink column is blank.

Sample code:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "rowFormatter":{
        "elmType": "div",
            "children": [
            {
                "elmType": "a",
                "txtContent": "Click here",
                "attributes": {
                    "target": "_blank",
                    "href": "[$HyperlinkCol]"
                }
            }
        ]
    }
}

Workaround if hyperlink field is empty - Set default redirection link:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "rowFormatter":{
        "elmType": "div",
            "children": [
            {
                "elmType": "a",
                "txtContent": "Click here",
                "attributes": {
                    "target": "_blank",
                    "href": "=if([$HyperlinkCol], [$HyperlinkCol], 'https://sharepoint.stackexchange.com/')"
                }
            }
        ]
    }
}

Microsoft documentation: Use view formatting to customize SharePoint