Service Portal / Widgets

Quick links

Allows users to easily access essential resources and references

Overview

  • A11Y WCAG 2.1 AA

Quick links offer a versatile and efficient way to guide users to essential resources, both within and outside the portal. They enable users to connect to various types of content: knowledge articles, external URLs, catalog items, or custom pages. Consider this feature as a way to highlight commonly visited pages, essential resources and references.

Important

Ensure you are using the correct type of Quick links. There are three:

  • Quick links (this widget): Primarily used on the homepage or general content pages, this widget typically displays a manually curated set of frequently accessed links. While it can be placed on record pages, its strength lies in providing consistent shortcuts to key areas or external resources, independent of the specific record being viewed.
  • Quick links on a topic page: Designed specifically for topic pages, this widget dynamically pulls and displays links that are relevant to the specific topic the user is currently browsing. This ensures users find targeted resources related to their area of interest.
  • Quick links (CD): This widget is part of Employee Center Pro's Content Publishing capability. It provides advanced scheduling and audience-based control for its links, offering a significant advantage for targeted and time-sensitive content delivery.
ServiceNow Docs link
Quick links widget

Additional information about the widget

ServiceNow Docs link
Managing quick links

Learn how to manage quick links within the ServiceNow platform

Figma link
Quick links Figma widget

Employee center Figma library

null

When to use

Use when you need to provide users with immediate access to a small, curated set of important links or actions that are relevant to the current context or a common user task. This is ideal for directing users to key areas, frequently accessed forms, or essential external resources.

When not to use

Do not use when you have a large number of links or require comprehensive navigation menus. Also, exercise caution when linking to external sites due to potential security risks. Finally, avoid overusing Quick links, as an excessive number can clutter the interface and impede users' ability to find relevant information.

Usage

For simple, always-present navigation to important destinations, the Quick links widget is the go-to solution. Place it on broadly accessed pages like the homepage to offer immediate pathways to key content and tools.

Examples

  • Common tasks: Quick links to common tasks (e.g., "View Paycheck," "Update Profile").
  • Support channels: Direct access to support channels (e.g., "Contact IT Helpdesk," "HR Support").
  • Important information: Consistent links to important announcements or news sections.

Anatomy

The basic anatomy of the quick links widget includes:

The widget's anatomy.

Header:

  1. Title: A short heading that describes the widget’s contents. Defaults to Quick links, if none is provided.

Body:

  1. Card: Each Quick link is housed in individual card components. Change card designs by adjusting their style, size, and alignment in the instance options.
  2. Link labels: Quick links require a short label that describes the link’s destination.
  3. Description (optional): Provides additional information and context of the link.
  4. Icon (optional): A visual icon that can provide additional context or visual appeal. Icons are not available in all card styles. Best practice for icons and images is to ensure that all cards have one. Otherwise it can begin to look disjointed.
  5. Background image (optional): For some display styles, you can add a background to each link as a visual treatment.

Card examples

Cards can be displayed in a variety of ways. To modify the display, configure the widget’s instance options.

Alignment

Cards can be either left or center aligned.

Left

Center

Size

Come in the default size or small.

Default

Small

Style

Ranges from a simple card style to one that is more graphically inclined.

Full

Simple

Instance options

Presentation

Field Description
Title A short descriptive heading of the widget’s contents. If this field empty is left empty, it defaults to Quick links.
Card display style Indicates how you want the card tile to appear on the widget. The choices are:
  • Thumbnail
  • Simple
Default value: Thumbnail
Card title size Indicates the size of the card tile on the widget. The choices are:
  • Medium
  • Small
Default value: Medium
Card content alignment Indicates how you want to align the content on each card. The choices are:
  • Center
  • Left
Default value: Left
Icon image display Displays an icon on the card tile. Valid only for:
  • Thumbnail Center Medium Cards
  • Thumbnail Left Medium and Small Cards
Background image display Displays the background image for the card tile. Valid only for:
  • Thumbnail Center Medium and Small Cards
Include description Option to include description for the card tile. Valid only for:
  • Thumbnail Left Medium Cards
  • Simple Medium Cards
Tile background color Background color of the card tile. The choices are:
  • Primary
  • Dark
  • Light
  • Accent
  • Hexcode
Valid only for thumbnail cards.
Tile background color hexcode Specify a hex code for the tile background color. Enter a value in this field only if you select Hexcode in the Tile Background Color field.
Icon overlay display Option to display a circular background for the icon. This option is displayed only when an icon is available. Valid only for:
  • Thumbnail Center Medium Cards
  • Thumbnail Left Medium and Small Cards
Icon overlay color hexcode Option to specify a color for the circular background for the icon. Enter a value in this field after you select the Icon Overlay Display option. This field defaults to #FFFFFF (white color) if you do not specify a value in this field.
Text overlay display Option to display the text overlay. Valid only for Thumbnail Center Medium and Small Cards.
Text overlay color hexcode Option to specify a color for the text overlay. Enter a value in this field after you select the Text Overlay Display option. This field defaults to #FFFFFF (white color) if you do not specify a value in this field.
Custom text color Indicates custom color for the text. Valid only for thumbnail cards.
Custom text color hexcode Specify a custom color for the text. Enter a value in this field after you select the Custom Text Color option. This field defaults to #FFFFFF (white color) if you do not specify a value in this field.
Quick links Specify which quick links to display in the widget. The order entered is the order displayed.

Other options

Field Description
Load configuration Specify how you want the content to load. Options are:
  • Sync - which loads items synchronously
  • Async - which loads items asynchronous
Show empty Widgets are designed to hide on a page when no results meet the criteria. Select this option to make the widget display on a page even when empty.

Usability

The Quick links widget supports the following keyboard interactions for accessibility:

Internationalization

Accessibility

Learn how to access the actionable elements of the Quick links through keyboard interactions and screen readers. 

Keyboard interactions

You can access the actionable elements of the quick links with these keyboard interactions:

  • Tab: Navigate through each link, sequentially, within the widget using the Tab key
  • Shift + tab: Navigate backward through the links using the shift + tab key combination
  • Enter/spacebar: Pressing the enter key or the spacebar on a focused link will activate the link and navigate the user to the specified destination.