{"id":413,"date":"2022-11-14T21:08:33","date_gmt":"2022-11-14T20:08:33","guid":{"rendered":"https:\/\/www.paalolav.no\/?p=413"},"modified":"2023-04-19T14:19:07","modified_gmt":"2023-04-19T12:19:07","slug":"recreating-quick-links-tiles-view-with-microsoft-lists","status":"publish","type":"post","link":"https:\/\/www.paalolav.no\/?p=413","title":{"rendered":"Recreating Quick Links Tiles view with Microsoft Lists"},"content":{"rendered":"\n<p>My customers have often complained that the Tiles view in the QuickLinks web part isn&#8217;t pretty enough. Here is a recreation that uses the SharePoint theme&#8217;s colours.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Create a new list with the following additional columns:<\/p>\n\n\n\n<p>Icon (Single line text)<br>URL (Hyperlink)<br>Sort (Number, no decimals)<br>NewTab (Yes\/No)<\/p>\n\n\n\n<p>For the icons, use friendly names from <a href=\"https:\/\/uifabricicons.azurewebsites.net\/\">https:\/\/uifabricicons.azurewebsites.net\/<\/a><\/p>\n\n\n\n<p>Try it out &#8211; it looks quite good!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.paalolav.no\/wp-content\/uploads\/2022\/11\/Quick-Links.png\"><img loading=\"lazy\" decoding=\"async\" width=\"746\" height=\"742\" src=\"https:\/\/www.paalolav.no\/wp-content\/uploads\/2022\/11\/Quick-Links.png\" alt=\"\" class=\"wp-image-415\" srcset=\"https:\/\/www.paalolav.no\/wp-content\/uploads\/2022\/11\/Quick-Links.png 746w, https:\/\/www.paalolav.no\/wp-content\/uploads\/2022\/11\/Quick-Links-300x298.png 300w, https:\/\/www.paalolav.no\/wp-content\/uploads\/2022\/11\/Quick-Links-150x150.png 150w\" sizes=\"(max-width: 746px) 100vw, 746px\" \/><\/a><\/figure>\n\n\n\n<p>Create a new Gallery view, and sort it by the Sort column and add the following formatting to the view.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>{\n  \"$schema\": \"https:\/\/developer.microsoft.com\/json-schemas\/sp\/v2\/tile-formatting.schema.json\",\n  \"hideColumnHeader\": true,\n  \"hideSelection\": true,\n  \"width\": \"110\",\n  \"height\": \"100\",\n  \"formatter\": {\n    \"elmType\": \"a\",\n    \"style\": {\n      \"text-decoration\": \"none\",\n      \"display\": \"inline-block\"\n    },\n    \"attributes\": {\n      \"href\": \"&#91;$URL]\",\n      \"target\": \"=if(&#91;$NewTab] = true, '_blank', '')\"\n    },\n    \"children\": &#91;\n      {\n        \"elmType\": \"div\",\n        \"attributes\": {\n          \"class\": \"ms-bgColor-themeDarkAlt ms-bgColor-themeLighterAlt--hover ms-fontColor-white--hover ms-fontColor-white\"\n        },\n        \"style\": {\n          \"display\": \"flex\",\n          \"flex-wrap\": \"wrap\",\n          \"min-width\": \"110px\",\n          \"min-height\": \"100px\",\n          \"border-radius\": \"10px\"\n        },\n        \"children\": &#91;\n          {\n            \"elmType\": \"div\",\n            \"style\": {\n              \"text-align\": \"center\",\n              \"margin\": \"auto\"\n            },\n            \"children\": &#91;\n              {\n                \"elmType\": \"div\",\n                \"attributes\": {\n                  \"iconName\": \"&#91;$Icon]\",\n                  \"class\": \"ms-fontSize-xxl\"\n                }\n              },\n              {\n                \"elmType\": \"div\",\n                \"style\": {\n                  \"font-size\": \"14px\"\n                },\n                \"attributes\": {\n                  \"class\": \"sp-row-title \"\n                },\n                \"txtContent\": \"&#91;$Title]\"\n              }\n            ]\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<p>Obviously inspired by <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/pnp\/List-Formatting\/tree\/master\/view-samples\/icon-link-tiles\" target=\"_blank\">https:\/\/github.com\/pnp\/List-Formatting\/tree\/master\/view-samples\/icon-link-tiles<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>My customers have often complained that the Tiles view in the QuickLinks web part isn&#8217;t pretty enough. Here is a recreation that uses the SharePoint theme&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":415,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69,67],"tags":[75,74],"class_list":["post-413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it","category-sharepoint","tag-lists","tag-sharepoint"],"_links":{"self":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts\/413"}],"collection":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=413"}],"version-history":[{"count":5,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts\/413\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts\/413\/revisions\/430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/media\/415"}],"wp:attachment":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}