Full-width Quick Links

An intuitive set of full-width Quick Links can connect users more efficiently between tasks. You can modify Quick Links right on landing pages so users can go to another page without returning to the homepage.

Here is an example of Quick Links on one of the landing pages.

Setting up the web part

On the site where you need to show the web part, create a new SharePoint list with the title [Quick Links] with the following fields:

  1. Title [default / no need to create]
  2. Icon [single line of text]
  3. URL [Hyperlink or Picture]
  4. Active [Yes/No]
  5. New Window [Yes/No]
  6. Display Order [Number]

NOTE: If you need more than one Quick Link web part, you can create as many lists as needed. Simply give each list a new name and connect the web part to the right list using web part properties.
image

Adding a new or updating an existing link
  1. To add or change Quick Links, click [*][Site Contents] on your page.
  2. Select [Quick Links] from the list of apps.
  3. To edit a link, select [Edit] on the menu. This will set the entire grid of links to enter the edit mode.
  4. Here you can change the [Title], [Link], Icon, Active (or hidden), Display Order, and whether or not the link opens a new tab or remains in the current browser tab.
    image

Steps on selecting a quick link icon are here.

Selecting “No” in the [Active] column will hide the quick link on the homepage but keep it available in the app to re-enable in the future.

[Display Order] is an optional numeric value used to sort links in the desired order.

Changing text and button colors

You can change the color of the button and the text by going to web part properties and entering HEX or RGB color of your choice:

image

Resizing quick links
  • Quick link buttons scale depending on how much space is available in the section they’re in.
  • You can change the section layout on the page (see screenshot) to constraint the space allocated for quick links forcing them to wrap.

image

Adding several separate Quick Link apps on a single page

You can have several Quick Link lists on a sample page each pointing to their own list with unique content. This can help break up the content with their unique action lists.

Here are the steps to set this up:

  1. Make a copy of the Quick Links list from the existing one as described in this post: Make a copy of FAQ or Quick Links list

  2. Add new Quick Links content to the newly created list

  3. Edit the page where you’d like to have an additional Quick Links app and add it from the gallery as usual

  4. Access Quick Links app properties and select the new list you have just created:

image

  1. Save the page and refresh it to see Quick Links being pulled from a separate list
Targeting select Quick Links to show only to specific groups or users

Sometimes homepage links can be relevant to some users and not relevant to others. For example, the Engineering team will not need to see the CRM icon but the Procurement team will.
You can show specific links to select groups and hide them for all the others.

Here is how to do that set this up:

  1. Ensure you have a security group for the target team who will see the link, in our case the Procurement team will see the link and others won’t.

NOTE: If you need setting up a new security group, ask your admin or follow the steps here: Create, edit, or delete a security group in the Microsoft 365 admin center - Microsoft 365 admin | Microsoft Docs

  1. Navigate to the Quick Links list, select [Site Contents] under [*] on the site.

  2. Select the link you’d like to only show for the Procurement team, in our case CRM link, and pick Manage access as shown below:

image

  1. In here, remove the group that already has access to the link, in our case [OrigamiHub Memebers]

image

You will see the group removed from this particular link.

  1. Now, click the (+) symbol as shown below and find the name of the group representing members of the Procurement team.

image

Now the CRM icon will only show to the members of the Procurement team and no one else. You can create the same set up for other icons as you see fit.

Anything unclear or doesn’t work?
Post your question or comment here

1 Like