Sharepoint Online Modern UI JSON Column Formating Hyperlink not working on Touchscreen

[SpLw71]

I have created listview using JSON column formatting with hyperlink like below 

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "a", "txtContent": "@currentField", "attributes": { "target": "_blank", "href": "='http://finance.yahoo.com/quote/' + @currentField" } }

On Computer with Mouseclick on the Link this work fine.

When i try this in Listview or Webpartview on Mobile Devices with Touchscreen Input it dosnt work. The Touch on the Link only opens the ListItem Detail Pane

It seems the Mouse and Touchevent is not the same

Is this a know issue ?

Is there a workaround?

[#2]

@SpLw71 

I can see there is no error in your JSON code.

I tried using the same JSON code on my SharePoint list and getting the same behavior on mobile device (in browser) as you mentioned.

I think this is a bug while using mobile devices. @Chris Kent might be able to help us with this issue.

---

Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#3]

@ganeshsanap I am also experiencing this same issue on Android Mobile devices, Apple iOS devices seem to be ok.

This JSON code works fine on desktop devices with JSON column formatting, but on Android mobile devices it opens the ListItem Details Pane. Apple iOS devices seem to open the link fine however

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank"
  },
  "txtContent": "View"
}

[#4]

@Peter_Board 

Hi Peter

My solution to this problem is a Gallerv view and for example a JSON code like:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "height": "60",
  "width": "320",
  "hideSelection": true,
  "hideColumnHader": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex": "1 0 300px",
      "flex-direction": "row",
      "align-items": "stretch",
      "width": "96%",
      "height": "96%",
      "flex-grow": "1",
      "justify-content": "space-around",
      "padding": "2px",
      "border": "1px solid darkblue",
      "border-radius": "20px",
      "box-shadow": "2px 2px 2px darkblue"
    },
    "attributes": {
      "class": "ms-bgColor-themeLighterAlt"
    },
    "children": [
      {
        "elmType": "a",
        "txtContent": "[$Title]",
        "style": {
          "padding-left": "7px",
          "padding-right": "7px",
          "font-size": "16x",
          "display": "flex",
          "text-align": "center",
          "align-items": "center",
          "justify-content": "center"
        },
        "attributes": {
          "class": "ms-fontSize-l ms-font-weight-regular ms-fontColor-themeDarker",
          "target": "_self",
          "href": "=[$]+'http://finance.yahoo.com/quote/' + @currentField"
        }
      }
    ]
  }
}

Best regards

[#5]

Ok - changing my reply 🙂 Thanks @SpLw71 

Got some working code like your example - had to remove one of the tags that didn't exist in Gallery Layouts

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": 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": "[$Project.lookupValue]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$SPLibraryTouch]"
          },
          {
            "elmType": "a",
            "txtContent": "View",
            "attributes": {
              "target": "_self","href": "[$SPLibraryTouch]"
            }
          }
        ]
      }
    ]
  }
}