Forum Discussion

SpLw71's avatar
SpLw71
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...
ganeshsanap's avatar
ganeshsanap
MVP
Nov 28, 2020

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. theChrisKent 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.

 

Peter_Board's avatar
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's avatar
    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's avatar
      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]"
            }
          }
        ]
      }
    ]
  }
}

       

       

Resources