About Setup Assistant#

Actions in the assistant launch LSF (Lightning Setup Flow) or link to configuration pages, and may be accompanied by links to Trailheads, articles, Help & Training documentation, and videos.

• The title of the assistant should always end with “Setup Assistant” (e.g. Einstein Setup Assistant).
• Use links to navigate to Trailheads, articles, Help & Training documentation, and videos.
• Use the Outline Brand Button to open LSF or configuration pages.
• Estimated time is optional.

Base#

Basic list of learning and task links that do not require progress tracking and do not have sequential steps.

<ol class="slds-setup-assistant">
  <li class="slds-setup-assistant__item">
    <article class="slds-setup-assistant__step">
      <div class="slds-setup-assistant__step-summary">

With Step Progress#

List of learning and task links with a recommended sequence that require progress tracking. Depending on the platform, completion checking will be through an API or a link click. The progress markers use the Progress Ring component.

<ol class="slds-setup-assistant">
  <li class="slds-setup-assistant__item">
    <article class="slds-setup-assistant__step">
      <div class="slds-setup-assistant__step-summary">

Hub with Expandable Steps#

Includes all the features of Setup Assistant Base + Progress, but also includes substeps that require sequential completion within the primary step. Inline Text within each primary step is optional.

Clicking on the icon toggle or the primary step's title will open and close that step's details. If a primary step's substeps have been started, the primary step's progress ring turns blue to indicate the amount of progress made on the substeps.

Accessibility Note

Since both the chevron toggle and the step's title act as a trigger to open and close the step's detail, ensure both the icon button and the title includearia-controls=[uniqueId] where the uniqueId matches the id on the<div> with class="slds-summary-detail__content".

<ol class="slds-setup-assistant">
  <li class="slds-setup-assistant__item">
    <article class="slds-setup-assistant__step">
      <div class="slds-summary-detail">

In a Card#

If the steps have associated progress, a header is added to the card containing the steps. This header indicates overall progress on this Setup Assistant and utilizes the Descriptive Progress Bar

Accessibility Note

In order to prevent duplicating information for screen reader users, the percentage info on the top of the progress bar is hidden using theslds-assistive-text class.

<section class="slds-card">
  <header class="slds-theme_shade slds-p-around_medium slds-m-bottom_small">
    <div>
      <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small" id="progress-bar-label-id-3">