Reactive Screen Component in Salesforce Flow : Bijay Kumar

May 26, 2025 May 26, 2025

Reactive Screen Component in Salesforce Flow
by: Bijay Kumar
blow post content copied from SalesForce FAQs
click here to view original post

### Summary of Content The content describes how to create a Salesforce screen flow that calculates discounts on products using reactive screen components. Initially, the flow required two screens: one for inputting the product price and discount percentage, and another for displaying the discount amount and final price. However, the author wanted to consolidate this information onto a single screen, which led to the discovery of reactive components. **Key Details:** - **Component Reactivity** allows fields on the same screen to update automatically without needing to click “Next.” - The tutorial explains how to enable reactivity in Salesforce flows by navigating to Setup -> Automation Settings and selecting the appropriate checkbox. - Steps to create a reactive screen flow include: - Adding a screen element with fields for Product Price, Discount Percentage, Discount Amount, and Discounted Price. - Using a slider for the Discount Percentage and setting up formulas to calculate the Discount Amount and Discounted Price dynamically. - The final setup allows users to see real-time updates as they input data, enhancing the user experience by reducing the complexity of multiple screens. This tutorial emphasizes the importance of component reactivity for improving user interactions within Salesforce screen flows. ### Additional Context Salesforce flows are essential for automating business processes, and implementing reactive components is a powerful feature that enhances user experience. The ability to perform real-time calculations on a single screen not only streamlines workflows but also minimizes the chance of user errors that can occur when navigating through multiple screens. ### Hashtags for SEO #Salesforce #SalesforceFlow #ReactiveComponents #ScreenFlow #DiscountCalculator #SalesforceTutorial #UserExperience #Automation #CRM #SalesforceDevelopment

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.

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.

Enable reactive components in Salesforce flow

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.

Reactive components in Salesforce Screen flow

In the flow builder, add a screen element to the flow.

As per the example, 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 for the Discount Percentage.

The slider component has a range from 1 to 100 by default. The order of the fields in the screen will be as shown in the image below.

Add reactivity to screen components in Salesforce flow

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

Salesforce Screen flow reactive component

With this, we have completed the screen component. Finally, give your screen a meaningful label like “Calculate Discount” and click Done.

Now, to test the component reactivity in the screen flow. Before that, we need to save the flow.

Add reactivity to Salesforce Screen 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. With this, we can add input and output fields on 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.

Salesforce Reader

Reactive Screen Component in Salesforce Flow : Bijay Kumar

What is Component Reactivity in Salesforce Flows?

Add Reactive Screen Component in Salesforce Screen Flow

Post a Comment