1

Using a Promoted Links list with View Formatting to display as tiles has stopped working today in one of our client's Microsoft 365 tenants. I've been able to reproduce the issue in my developer tenant.

When the view formatting is applied, the items are rendered as expected, but nothing happens when you click the link. Removing the JSON fixes the issue with the links, but we lose the formatting.

This functionality has been working for months, but for some reason it stopped today. I've tested with the current release of Chrome and Edge on Windows 10.

Here is the JSON being used to format the links:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": true,
  "tileProps": {
    "hideSelection": true,
    "width": "190",
    "height": "165",
    "formatter": {
      "elmType": "div",
      "children": [
        {
          "elmType": "a",
          "attributes": {
            "title": "[$Title]",
            "href": "[$LinkLocation]",
            "target": "_blank",
            "class": "ms-bgColor-themeLighterAlt--hover ms-fontColor-blue--hover ms-bgColor-themePrimary ms-fontColor-white"
          },
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "border-radius": "20px",
            "min-width": "180px",
            "min-height": "150px",
            "max-width": "180px",
            "max-height": "150px",
            "margin-right": "10px",
            "margin-top": "10px",
            "box-shadow": "2px 2px 4px darkgrey"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "center",
                "margin": "auto"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "sp-row-title "
                  },
                  "txtContent": "[$Title]"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
'''
5
  • make sure you have selected "Tiles" view in your list. Also why you have written hideSelection two times? I think it should only be outside of tileProps. – Ganesh Sanap Jul 7 '20 at 7:16
  • Thanks @GaneshSanap. Tiles view is selected. I experimented with the hideSelection options. It doesn't seem to have any impact at the top level, so I have removed it. If I set hideSelection to false for the titleProps section then the link works. The down side is I get a selection control in the top right corner. – Ivan Wilson Jul 7 '20 at 8:11
  • Check my answer given here and let me know if it helps you. – Ganesh Sanap Jul 7 '20 at 8:42
  • Same issue with that JSON. When the hideSelection is set to true, the browser is throwing the following error on the click event: Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' [...] Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution However, changing the hideSelection to false doesn't throw this error. It appears the JavaScript that runs with the setting disabled is attempting to perform an eval operation that violates the security policy – Ivan Wilson Jul 7 '20 at 23:19
  • We have also noticed another behaviour that seems related. When the link is configured to launch in a dialog box, the dialog box is not sized correctly. People need to use the horizontal and vertical scroll bars to view the dialog contents. It looks like this is a new method for launching dialog boxes. It isn't using the SP.UI.ModalDialog.showModalDialog method. I'm guessing it us using the SharePoint Framework sp-dialog module. Another new behaviour is clicking outside the dialog box causes it to close. – Ivan Wilson Jul 9 '20 at 7:39
0

After we add json formatter,the element are like:

<a href="javascript:;"> .....<a style="height:100%;overflow:hidden;box-sizing:border-box;" class="sp-field-customFormatter" rel="noopener noreferrer " href="...">....</a>...</a>

enter image description here

All elements are surrounded with <a href="javascript:;"></a>,so it can not point to the link.

Although the default view is also surrounded with <a href="javascript:;"></a>,there should be some default js code executed.

modern view(default):

enter image description here

classic view:

enter image description here

3
  • Hi Amos, JavaScript is executed on the mouseUp event on the <A> tag. I believe the issue is happening within the code that is executed. My debugging skills are not good enough to analyse that code. – Ivan Wilson Jul 8 '20 at 22:31
  • It seems that your json works well again. – Amos Jul 13 '20 at 9:59
  • It looks like they may have rolled back the code. I'm no longer seeing the JavaScript error. However the option to launch a link in a dialog now opens in a new tab. I've been told that this was the behaviour prior to the recent issue. – Ivan Wilson Jul 13 '20 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.