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. 💪