How to Change the Appearance of Your Progress Indicator using a variable

This tutorial guides you through creating and utilizing the "Progress Type" variable in your Avonni progress indicator component. This variable empowers you to modify your progress indicator's look and feel quickly.

Here's a breakdown of the process:

1. Creating the "Progress Type" Variable

Access the settings for your Avonni progress indicator component.
Locate the section for variables (This might be named differently depending on the specific Avonni framework you're using).
Click on "Create Variable" or a similar option.
In the name field, enter "Progress Type".
Choose "Text" as the data type for this variable.

2. Setting the Default Value

In the "Default Value" field, enter "horizontal". This establishes the classic left-to-right progress bar as the default style.

3. Using the Variable's Power

Here's where things get exciting! The "Progress Type" variable controls the visual style of your progress indicator.

Add the Avonni Progress Indicator component to your screen flow.
Assign the variable to the Progress Indicator type attribute: We control its appearance by linking it to the progress indicator's 'Type' setting with a single change. If we ever want to change our entire flow to use the 'path' style, we only need to update this variable, and all our progress indicators will change automatically.

Changing the Type: Suppose you want a progress indicator that follows a path connecting steps, rather than the default horizontal bar. Edit the "Progress Type" variable's default value to "Path".

Automatic Update: The magic happens here! All progress indicator components linked to the "Progress Type" variable on your screen flow will automatically update to reflect the new style ("Path" in this case). You won't need to modify any other code!

This variable streamlines your workflow by allowing you to manage the appearance of your progress indicators from a central location. You can effortlessly switch between styles like "horizontal", "path", or potentially other Avonni-supported types (vertical, bar, circle...).

In essence, the "Progress Type" variable grants you significant flexibility and time-saving benefits when customizing the look of your progress indicators.

Last updated 10 months ago

Was this helpful?

1. Creating the "Progress Type" Variable

Access the settings for your Avonni progress indicator component.

Locate the section for variables (This might be named differently depending on the specific Avonni framework you're using).

Click on "Create Variable" or a similar option.

In the name field, enter "Progress Type".

Choose "Text" as the data type for this variable.

3. Using the Variable's Power

Here's where things get exciting! The "Progress Type" variable controls the visual style of your progress indicator.

Add the Avonni Progress Indicator component to your screen flow.

Assign the variable to the Progress Indicator type attribute: We control its appearance by linking it to the progress indicator's 'Type' setting with a single change. If we ever want to change our entire flow to use the 'path' style, we only need to update this variable, and all our progress indicators will change automatically.

Changing the Type: Suppose you want a progress indicator that follows a path connecting steps, rather than the default horizontal bar. Edit the "Progress Type" variable's default value to "Path".

Automatic Update: The magic happens here! All progress indicator components linked to the "Progress Type" variable on your screen flow will automatically update to reflect the new style ("Path" in this case). You won't need to modify any other code!

In essence, the "Progress Type" variable grants you significant flexibility and time-saving benefits when customizing the look of your progress indicators.