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


Posted

in

,

by

Tags:

Comments

3 responses to “Recreating Quick Links Tiles view with Microsoft Lists”

  1. Dmytro Che

    Thank you very much fot the article. You have s nice blog

    Original article didn’t work for me)

    Is there any option to use custom images instead of SP built in icons?
    For example to recreate a top menu like here:
    https://support.microsoft.com/en-us/microsoft-365?ui=en-us&rs=en-us&ad=us

  2. Thank you for the kind words.
    You can of change the reference to an internal or external url with custom icons.
    How you want this to work is up to you. One way would be to paste the URL per item. Another way would be to hardcode part of the url to i.e. a sharepoint library. Then you’d just enter the filename for the icon as the Icon value per item. You could also upload icons in the list with the relatively new icon column and use that. See my other blog post about the icon column if that’s interesting to you. Best of luck!

  3. Anonymous User

    This is so helpful, Pal.

    However, the list items in gallery mode appears congested. I would like to add some space in between the items.

    Is there any way to do so. Thanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *