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