I recently created a Salesforce screen flow to calculate discounts on a product. Initially, the flow had two screens, one for entering the price and selecting the discount percentage, and another to display the discount amount and final price.
While this worked, I wanted to show all four fields on a single screen. That’s when I came across reactive screen flow components. With these, I could display the price, discount %, discount amount, and final price together on one screen, with real-time updates as the user entered values.
In this Salesforce tutorial, I will explain the reactive screen component in Salesforce flows and how it can be used in screen flows.
What is Component Reactivity in Salesforce Flows?
Component reactivity in Salesforce screen flows allows specific fields on the same screen to update automatically. The user can enter or change values without clicking the “Next” button or submitting the screen. This means you can create a more interactive and dynamic flow experience, where real-time calculations or field visibility updates happen within a single screen.
Check out: Pause and Resume a Screen Flow in Salesforce
Add Reactive Screen Component in Salesforce Screen Flow
To add reactivity in the screen component, we first need to enable the component reactivity from the Automation settings.
To enable reactivity in flow components, navigate to Setup -> Automation Settings -> select the checkbox Enable Reactive Components for Specific Flow Versions then click Save.
Now, follow the steps below to create the screen flow with reactive components.
- Navigate to setup -> Flows setup -> click the New Flow button to create a flow.
- Select the option Screen flow and click on the Create button.
- In the flow builder, add a screen element to the flow.
- As per the scenario, we need four fields on the screen: Product Price, Discount Percentage, Discount Amount, and Discounted Price.
In the flow screen, we will add a three-number component for Product Price, Discount Amount, and Discounted Price. For the Discount Percentage, I have added a slider component. The slider component’s default range is 1 to 100.
The order of the fields on the screen will be as shown in the image below.
Check out: Create Recurring Task Via Flow in Salesforce
- In the slider component, set the Disabled property to False. Here, we can also customize the slider range from the Range Maximum and Range Minimum fields.
- In the Discount Amount field, click on the field Default Value and select New resource. This resource will calculate the discount amount using a formula. The new resource will be defined as:
- Select Resource Type as Formula.
- Enter the API Name DiscountAmount.
- Select Data type as Number.
- The formula to calculate the discount amount.
{!Product_Price}*{!Discount_percentage.value}/100- To calculate the Discounted Price, we will create another formula resource. In Discounted Price, click Default Value and select New Resource.
- Define the New resource in the following way:
- Select the Resource Type as formula.
- Enter the API Name.
- Select the Data Type as Number.
- Enter the below formula to calculate the discount price.
{!Product_Price}-{!Product_Price}*{!Discount_percentage.value}/100
With this, we have completed the screen component. Finally, give your screen a meaningful label like “Calculate Discount” and click Done.
Check out: Assign Records to Queue Using Salesforce Flow
- Now, to test the component reactivity in the screen flow. Before that, we need to save the flow.
- To test the flow, click on the debug button.
- In the debug window, enter the values in the input field Product Price. After this move the slider discount percentage, and you will see the calculation reflected in the fields Discount Amount and Discounted Price.
This way, we can add component reactivity in the Salesforce screen flow. We can add input and output fields on the same screen and simplify the flow structure.
I hope you understand what component reactivity is and how to implement it in Salesforce screen flow. In the above example, by enabling component reactivity and using formula resources, we were able to display real-time updates for the discount amount and final price as users entered values.
This approach improves the user experience and simplifies the flow by reducing the need for multiple screens.
You may also like to read:
- Get Current Record ID in Salesforce Flows
- Clone Records with their Related records in Salesforce using Flow
- Conditional Visibility in Salesforce Flows
- Use HTTP Callout In Salesforce Flow
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
