Workspace / Components

SLA Timer

A timer that uses a highlighted value to show the status of a task Service Level Agreement (SLA), including when it is late.

Overview

  • Release version
    Zurich
  • Available sinceParis
  • A11Y WCAG 2.1 AA
ServiceNow link
SLA Timer code documentation

UIB and developer guidance

Figma link
SLA Timer Figma component

Figma library with components for designing Workspace.

Anatomy

  1. Icon: Visual element that supplements a highlighted value to indicate a status or category (1yr 11mo, 2mo 1wk, 2wk 6d, 3d 19h)
  2. Label: Text that describes the status or category of the highlighted value
  3. Highlight: Background color that visually expresses the status of the SLA

Subcomponents

See the usage guidelines for icon.

See the usage guidelines for highlighted value.

Usage

The timer gives you quick updates on the time spent running SLAs. It also warns you with color highlighting when an SLA is about to fail or has failed.

Configurations

Learn how to customize SLA timer by configuring the available properties.

Task

Provide the system IDs for all tasks whose statuses you want the SLA timer to show.

Configuration record

Optionally, you can configure the SLA timer for the specific configuration records to which SLAs are attached. This ensures that the most applicable SLAs are displayed by the component.

Icon

You can configure to show or hide the clock icon on the timer. The icon is hidden by default.

Design Recommendations

button application primary do
Do

You can use SLA timer to monitor the status of important task SLAs in your system.

button application primary dont
Don’t

Do not use the SLA timer in areas where SLA timer is not required and when the record does not need to be resolved at critical speed.

Behavior

Learn how SLA timer behaves when the display changes or a user interacts with the component.

Responsive behaviors

SLA timer reacts automatically to changes in the status of the SLA. Color changes and label information update the user as the SLA progresses through its various stages or is in danger of breaching.

Duration

The timer label displays the duration of a running SLA using different time formats. Duration is marked in minutes, hours, weeks, months, and years. Running SLAs that haven’t breached or aren’t in danger of breaching appear in green.

Stages

Different colors and labels indicate the SLA’s current stage, from most critical to least critical. There are 5 possible stages: Breached, Cancelled, Paused, Achieved, and Completed. The timer for SLAs that have breached is shown in red. Paused SLAs or SLAs that are still running are shown in green. SLAs that have been resolved or cancelled are highlighted in gray. These stages are taken from the task.

Schedules

The timer label displays the duration of a running SLA within a schedule. The timer displays either the remaining time or a note that the SLA is out of schedule.

Breach warning

A countdown timer for an SLA that is in danger of breaching appears with yellow highlighting. The duration indicator shows the time remaining until the breach occurs.

Usability

SLA timer complies with all internationalization and accessibility requirements.

Internationalization

When this component is used in a platform configured for a right-to-left (RTL) language, the SLA timer flips. If it contains the icon, the icon appears to the right of the text.

Accessibility

Learn how to access the actionable elements of SLA timer through screen readers.

Screen readers

The screen reader can announce the SLA timer and any related content together. Use aria-labelledby and aria-describedby to connect the SLA timer to the related content.