Using Variables to Define Common Properties for Components Across Your Flow - Avonni Flow Screen Components

??Thursday Tips & Tricks: Using Variables to Define Common Properties for Components Across Your Flow ??

Welcome to another edition of our Thursday Tips & Tricks series.

Today, we're focusing on defining and using a variable to define common properties for a specific component across your flow. This technique can help maintain consistency and reduce the complexity of managing similar properties in multiple locations.

We'll use the Avonni Progress Indicator component in our example to use the vertical variant across all our screen elements for our flow. Let's dive right in! ??

Step 1: Create a Text Variable ??

The first step is to create a text variable that will store the default value for the variant progress indicator, such as "vertical".

To do this:

1?? Navigate to the main canvas of your flow.

2?? Access the variable management panel by clicking the "Toolbox" button.

3?? Click the "New Resource" button to create a new variable.

4?? Select a Resource Type >?Variable

5?? Enter the variable name, e.g., "progressIndicatorType".

6?? Set the data type as "Text".

7?? Set the default value to "vertical" or use any other attribute you want to set for a component.

8?? Save your new variable.

Step 2: Map the Variable to the Variant Attribute of the Avonni Progress Indicator Element ??

Now that you've created the variable, it's time to use it as the default mapped value for the variant attribute of the Avonni Progress Indicator element within your screen elements:

1?? Navigate to the screen element in your flow where you want to add the Avonni Progress Indicator component.

2?? Drag and drop the Avonni Progress Indicator component onto the screen element.

3?? Click on the Avonni Progress Indicator component to access its properties.

4?? Locate the "Type" attribute.

5?? Instead of manually entering a value, map the "progressIndicatorType" variable you created earlier to this attribute by selecting it from the available resources by clicking on the "Mapped" attribute

6?? Repeat these steps for each screen element where you want to use the Avonni Progress Indicator component with that type attribute already set up.

Following these steps, you've successfully used a variable to define a common property for the Avonni Progress Indicator component across your flow. This makes it easier to manage and maintain consistency in your flow, reducing the effort required to update this property in the future. ??

We hope you found this Thursday's Tips & Tricks helpful! ?? Stay tuned for more practical tips to enhance your flow design process. Feel free to share your thoughts or your tips in the comments below. Happy Flow Building! ???