Forum Discussion

Copper Contributor

Nov 28, 2020

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

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", "el...

Peter_Board

Copper Contributor

Sep 16, 2022

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"
}

SpLw71

Copper Contributor

Sep 16, 2022

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

Peter_Board

Copper Contributor

Oct 07, 2022

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