Extra Baggage Selection using Reactive Components

Overview

This tutorial requires installing the Avonni Flow Screen Components managed package on your Salesforce org.

To complete this tutorial successfully, you must enable the Reactive Screen Components Beta feature in Salesforce.

To opt in to the Beta you need to go to the Process Automation Settings page within Setup. Scroll down to the bottom and enable the Reactive Screens Beta.

If you did not enable this setting before, you need to create a new flow once it is activated.

The Extra Baggage Selection component use case, leveraging the Avonni Progress Indicator, Input Counter, and Metric components, provides a user-friendly interface for passengers to purchase additional baggage effortlessly. With an intuitive step-by-step process, passengers can select the desired traveler and specify the extra bags required, ensuring a seamless and efficient experience for managing travel needs.

So, let's get started!

Final Result

Screen flow overview

Steps

1️⃣ Create the Screen Flow

2️⃣ Add a screen element

3️⃣ Add the Avonni Header

Start by adding the Avonni Header at the top of your screen flow. This will give all the following components a uniform look and feel and improve the overall design and harmony of the Bagagge selection component. It's a small change that can make a big difference in your layout.

Attribute	Value
Title	EWR-Liberty Intl. to LAS-Harry Reid Intl.
Is Joined	True
Avatar Variant	Square
Avatar Icon Name	custom:custom20
Avatar Size	Medium
Avatar Position	Left

Style Panel

Attribute	Value
Margin Bottom	Medium
Background	#ffffff
Avatar Icon Background Color	#fcc003

4️⃣ Add a section element

Adding the Section component to display the Avonni Image and Avonni Input Counter

Adding a ' Section ' element is important before incorporating components into our screen flow. This element is crucial because it allows us to create two distinct sections within our screen element. These separate sections will enable us to easily organize and drag the desired components into their respective places.

5️⃣ Add a Text Element, Avonni Image and Avonni Input Counter

In this step, users are guided to select their baggage cost.

• Initially, they are presented with a text component displaying the price per bag.
• Adjacent to this, the Avonni Image component visually illustrates the type of baggage selected with a relevant image.
• To finalize their selection, users use the Avonni Input Counter on the right, enabling them to input the quantity of baggage they wish to register within a set range. This step ensures users are well-informed and able to make accurate selections.

6️⃣ Add the Avonni Metric component

In this step, we're build the pricing information using the Avonni Metric component. The Avonni Metric is employed to display the calculated cost of the selected baggage dynamically. It derives the price based on the input counter selection, using a formula to update the cost instantly.

Avonni Metric configuration

Attribute	Value
Value	Formula Field value
Secondary Value	Formula Field value

To associate a formula for the value and secondary value, select "Mapped" on click on the formula you want to use as a value and secondary value

Formula selection

7️⃣ Add buttons to validate the process

In this final step of building the baggage cost selection component, we integrate two Avonni Button components. These buttons facilitate user interaction, allowing them to confirm or cancel their baggage selection. For example, the 'confirm' button finalizes their input by going to the next screen, while the 'cancel' button allows users to discard their selection and restart the process if needed. This finalizes the intuitive and user-friendly design of the baggage cost selection component.

Having trouble with this tutorial? Contact Avonni support for help.