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