Recreating Quick Links Tiles view with Microsoft Lists

My customers have often complained that the Tiles view in the QuickLinks web part isn’t pretty enough. Here is a recreation that uses the SharePoint theme’s colours.

Create a new list with the following additional columns:

Icon (Single line text)
URL (Hyperlink)
Sort (Number, no decimals)
NewTab (Yes/No)

For the icons, use friendly names from https://uifabricicons.azurewebsites.net/

Try it out – it looks quite good!

Create a new Gallery view, and sort it by the Sort column and add the following formatting to the view.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "width": "110",
  "height": "100",
  "formatter": {
    "elmType": "a",
    "style": {
      "text-decoration": "none",
      "display": "inline-block"
    },
    "attributes": {
      "href": "[$URL]",
      "target": "=if([$NewTab] = true, '_blank', '')"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeDarkAlt ms-bgColor-themeLighterAlt--hover ms-fontColor-white--hover ms-fontColor-white"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "min-width": "110px",
          "min-height": "100px",
          "border-radius": "10px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-xxl"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "14px"
                },
                "attributes": {
                  "class": "sp-row-title "
                },
                "txtContent": "[$Title]"
              }
            ]
          }
        ]
      }
    ]
  }
}

Obviously inspired by https://github.com/pnp/List-Formatting/tree/master/view-samples/icon-link-tiles