Often will site provisioning projects require that we add a few pages to the newly created site, and one of the most common web parts on these pages is the Quick Links web part.
This flexible web part comes with a number of layouts, but each Quick Link consist of a Link ( title + URL) , a Thumbnail/Icon and a description.
The issue I have had with the Quick Links web part is similar to this issues I had with the Navigation/Menu items, they will change over time.
Previously I have had an admin site for the site provisioning engine. On that site I had a Quick Links master list, containing the Quick Link Items for the various pages in the setup.
Each night I had to run an Azure Runbook that checked if any of the items in the master list had changed, and then update all the instances of that Quick Link.
It worked but I didn't really like the solution design.
Recently we got a question about a Quick Links layout in the PnP Modern Search repository, and that triggered the idea to change the solution to be Search based.
Our Information Architecture should be flexible enough to handle a later requirement that various Departments or Divisions in the organisation should have their own version of the provisioning engine and thus their own Admin site. Therefor the basic Content type as below is created in the Content Type Gallery:
The QuickLinksInPnPModernSearchCategory is used to specify which site provisioning template this item belongs to. As it is based on a Term set, this has to be created before the site column. It can be omitted in less advanced setups.
The next step is to create a new List, add the Content type, add a few items, hit reindex list in Advanced settings and wait for the search indexer to do its work. In most cases 30 minutes is sufficient.
While you are waiting you should add a new Document Library "Search layouts", and add each of the 3 custom "Quick Links lookalike" layouts from the PnP Modern Search layouts repository
Now add a PnP Modern Search Results web part to a page of your choice.
This description is intended for the most advanced layout, which also shows a User. If you only need one of the less advanced layouts, you can leave out the User property.
Set the Query template to the contenttypeid of our content type, and in this example I am only using the items that has a specific Category (the GUID can be found in the Term store)
Add the 3 properties to the Selected Properties" list. This is a precondition for using them in the layout slots
Add the 3 properties to the layout slots.
Change the page layout to match your requirements. As the layouts are derived from the Card layout, they support a grid like structure as well.
Each of the 3 layouts is available in a 3 columns layout:
When using a one column layout on the page:
Now it is time to apply the required custom layout. On "page" 2 of the configuration you choose "Custom" and paste the URL to the layout of your choice from the Search Layouts library.
Voila, you are done
Well, unless you want to tweak the custom layouts further. The layouts allow you to modify both the HTML and the CSS.
I would recommend to stick to the Theme colors as much as possible in order to be sure that the design will work when somebody switches the site to use another Theme
If you make your own layouts, we are very happy to accept PR in the PnP Modern Search layouts repository :-)
Comments