LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Overview
  • Settings

Was this helpful?

  1. Experience Components

Progress Indicator

Overview

The Avonni Progress Indicator Component is a versatile tool for Salesforce Experience Cloud, providing visual progress tracking in various formats. This document details the settings available for customizing the Progress Indicator component.

Settings

Name
Description

Type

Choose from Base, Vertical, Bar, Circle, Path, or Vertical Navigation styles.

Format

  • Linear: Standard progress flow.

  • Non-linear: Progress does not follow a sequential order

Shaded

Apply shading effect to the component

Current Step

Define the current step in the progress flow.

Icon Alignment

  • Center: Center the icon in the step.

  • Top: Align the icon at the top of the step

Icon Size

Select from Small, Medium, or Large.

Show Step Number

Display the number of each step.

Show Step Label

Display labels for each step.

Hide Bar Value

Hide the value/percentage on the progress bar.

Data Source

  • Manual: Manually input progress data.

  • Picklist Values: Use values from a picklist to define progress

Name
Description

Bar

Customize color and completed color.

Icon

Offers extensive color customization, including:

  • Focus, Regular, Fill, Border, Active, Completed, and Error Colors (and their Fill and Border variants).

Step Label

  • Text Color: Set the color of the label text.

  • Font Size: Define the size of the font.

  • Font Family: Choose the typeface for the label.

  • Font Weight: Select the weight/thickness of the font.

  • Text Shadow: Add shadow effect to the text.

  • Line Clamp: Limit the number of lines for the label text

Last updated 1 year ago

Was this helpful?

Page cover image