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", "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?

 

 

 

4 Replies

  • 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

Resources