Quick Links Web Part
Documentation for version 1.0.0.9.
The Ometa Quick Links web part is the alternative for the promoted links web part. This web part was a commonly used web part in SharePoint 2013 and 2016. With the introduction of the Modern UI Experience in SharePoint Online there is no longer support for the promoted links web part. In SharePoint Online you will find the out of the box "Quick Links" web part. This web part however, has a few disadvantages like:
- the configuration is fixed and stored in the web part;
- (currently) no option to target an audience and everyone sees the same links even when they don't have permission to the page.
This is why Ometa developed the Quick Links web part which tackles these disadvantages.
Supported Versions
The Ometa Quick Links web part is only supported for SharePoint Online and SharePoint 2019.
Installation
Upload the correct package in the App Catalog.
- SharePoint Online: quick-links-webpart-spo.sppkg
- SharePoint 2019: quick-links-webpart-sp2019.sppkg
Why Use Ometa Quick Links
If you are using SharePoint Online and you're looking for a fast way to navigate around your portal you should use the Ometa Quick Links. This web part should be used over an ADM because of performance reasons. The Ometa Quick Links web part reads the navigation items from the current SharePoint site. There is no other overhead happening which means that it will be faster than an ADM.
Layouts
The Quick Links web part supports the following display modes:
- Buttons
- Tiles
- Grid
Buttons
Tiles
Grid
The active button will be highlighted (except Grid layout) in the current SharePoint theme colour if the Url field from the navigation list contains a part from the server request path. If this is not possible a warning will be logged in the console.
Configuration
When inserting the Quick Links web part on a modern page you need to configure the following settings:
Navigation list
You need to specify the name of the SharePoint list containing the navigation items. Only the items where the current user has access to will be retrieved. This means that you can set permissions on each item to make sure only the relevant navigation items are displayed for the user.
The navigation list should be a generic list with the following fields:
Field Name | Field Type | Description |
---|---|---|
Title | Single line of text | The title to display. |
Url | Single line of text | The URL to navigate to. Try to use relative URLs since navigation will be faster between Modern Pages. |
Image Url* | Single line of text | The URL of the image or the friendly name from a Office UI Fabrics icon https://uifabricicons.azurewebsites.net/. |
Launch Behaviour* | Choice | New Tab or Same Tab. |
Tile Order* | Number | The order in which the navigation items are displayed. 0 will be displayed as first item. |
* The name and static names of these fields are without the whitespace.
Here is an example of a navigation list with two items. Notice the Tile Order column which is empty. The order of the list items will be used for determining the display order.
Layout
One of the supported layouts.
Include
Specify the title of the navigation item to only display these items. You can specify multiple items by separating the items with ;#
. This way you can easily reuse a single navigation list. Leave empty to include all items where the current user has access to.
Building Block
To successfully use the Ometa Quick Links web part you need to execute two web parts. One for creating the navigation list and one for ensuring the web part on a modern page.
Ensure Navigation List
The Ensure Navigation List building block can be found in the SharePoint.BuildingBlocks.Lists object. When the Building Block creates a new list the inheritance tree will be broken and everyone has read permissions. Only administrators have the possibility to edit the items in the list.
It is also possible to configure GroupReaders in the Navigation Items parameter. This is an array of the SharePoint Groups which should have read access to the item. You no longer have to configure the Ensure Permission Level building blocks, this will save you a lot of configuration time and increases the performance of site creation.
This method takes the following input parameters:
- Navigation List: the name of the navigation list. If the list exists already, nothing will happen.
Navigation Items: a JSON structure containing all the items for the list. The JSON structure needs to be linearised meaning that it should not contain any line breaks.
[{ "Title":"The title to display", "Url":"Best practice to use relative URLs e.g.: /sites/home.aspx", "ImageUrl":"Image URL of Fabrics UI Icon Friendly Name e.g.: Globe", "LaunchBehaviour":"New Tab", "TileOrder":1, "GroupReaders": ["My SharePoint Group", "Second Group"] },{ "Title":"My second items", "Url":"/sites/myPage.aspx", "ImageUrl":"Globe", "LaunchBehaviour":"Same Tab", "TileOrder":2 }]
A good online tool to remove all the white spaces is: http://jsonviewer.stack.hu/
Url: Most of the time left empty; in Case Management the URL of the case will be used. Fill out the URL of the site collection if you need to create the list on a fixed place.
Ensure Ometa Quick Links Web Part
To ensure an Ometa Quick Links Web Part you need to execute the Ensure Ometa Quick Links method in the SharePoint.BuildingBlocks.WebParts.Modern object.
Ensure Web Part
Note
Still supported but not user friendly in terms of configuration. Use the Ensure Ometa Quick Links building block instead.
To ensure an Ometa Quick Links Web Part you need to execute the Ensure Web Part method in the SharePoint.BuildingBlocks.WebParts.Modern object.
The three most important parameters to fill out are:
- Client Side Component Name: the name of the web part so: Ometa Quick Links.
- Default Web Part: select Client Side Web Part from the dropdown list.
- Web Part JSON Data: the JSON data which can be found when setting the modern page in maintenance mode by adding the following query string:
?maintenancemode=true
. Click on the Data tab and copy everything. Make sure to linearise the JSON string with for example an online tool like: http://jsonviewer.stack.hu/.