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!
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
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.
Last updated
