Reactive Components in Salesforce Screen Flows

Introduction:

With the Summer '23 release, Salesforce has unveiled an exciting new feature - Reactive Components in Screen Flows. This innovation empowers developers and admins to create dynamic, real-time user experiences within flows, enhancing interactivity and responsiveness. In this blog, we'll explore the concept of reactive components and delve into a couple of scenarios that showcase their potential in Salesforce Screen Flows.

As of Summer '23 release, Reactive Screen Components is still a beta feature. Therefore, you have to opt into the beta program. In order to opt in to the beta program,

  • Setup-> Search "Process Automation Settings" in the Quick Find box.
  • Find "Opt in to Reactive Screens Beta" then, mark this checkbox.

Once you opt in to the beta program, you can build reactive screens.

Process Automation Settings

Figure 1: Enable Reactive Screen Components

Understanding Reactive Components in Salesforce Screen Flows

Reactive Components introduce a paradigm shift in how users interact with flows. Instead of traditional static elements, reactive components respond instantly to user inputs and changes in external data. These components bring greater flexibility and reactivity to screen flows, improving user engagement and productivity.

Scenario: Interest calculator

Consider a scenario where a customer service representative updates a customer with interest value for her investments. With reactive components, you can now implement a real-time calculator of interest.

The screen takes three inputs: Principal in US Dollars, number of years and interest rate percent. It generates four outputs, simple interest, compound interest, Amount with simple interest and amount with compound interest.

Step1: Create a new Flow

In the Salesforce Flow Builder, create a new Flow and add a Screen element to the canvas.

Step 2:Add Component onto the Screen element.

For Input Component Drag the Currency component from the left-hand side component section and drop into screen element ,named it Principle Amount .For “Interest rate” and “Number of year” drag and drop Number component. For Output Component Drag and drop Currency Component and name it “Simple Interest” “Amount with Simple Interest”,”Compound Interest” and “Amount with Compound Interest”.

Add Component

Figure 2: Adding Input and output component on Screen Element.

Step 3:Display value on Output Component.

For Display value on output component select the component and Provide it default value using formula resources.

Display value on Output Component

Figure 3: Displaying Value on Output component by giving Formula Resources on Default value.

Formula Resources

  • Simple Interest Formula Resources

Formula To calculate simple Interest

Figure 4: Formula To calculate simple Interest

  • Amount With Simple Interest Formula Resources

Formula To calculate Amount with Simple Interest

Figure 5: Formula To calculate Amount with Simple Interest

  • Compound Interest Formula Resources

Formula To calculate compound Interest

Figure 6: Formula To calculate compound Interest.

  • Amount with Compound interest formula resources

Formula To calculate Amount with Compound interest

Figure 7: Formula To calculate Amount with Compound interest.

Step 4: Test the flow

After Saving the flow, provide input value in ‘Principal Amount’, ’Interest Rate’ and ‘Number of years’. The flow will populate the value in output components ‘Simple Interest’, ’Amount with Simple Interest’ , ’Compound Interest’ and ‘Amount with Compound Interest’’ accordingly.

Testing of Reactive components in salesforce Screen flow

Benefits of Reactive Components:

Enhanced User Experience: Reactive Components enable non-developers to create single-page app-like experiences, reducing the number of screens users need to navigate.

Increased Flexibility: Previously, components on the same screen couldn't communicate. With Reactive Components, you can now configure components to react to changes in other components on the same screen, opening up a world of possibilities for customization and flexibility.

Simplified Development Process: Reactive Components make building complex interactions between components easier, simplifying the overall development process and reducing development time.

Conclusion

The introduction of Reactive Components in Salesforce Screen Flows with the Summer '23 release marks a significant milestone in empowering developers and admins to create more engaging and efficient user experiences. The interest calculator screen flow illustrates the potential of reactive components to revolutionize how users interact with flows.

By leveraging the power of reactive components, Salesforce administrators and developers can now build flows that feel alive and responsive, delighting users with an interactive and dynamic journey. As you dive into this exciting new feature, explore its capabilities and experiment with various use cases, unlocking new possibilities for your Salesforce applications.

So, don't wait any longer! Embrace the power of Reactive Components in Screen Flows and elevate your Salesforce user experience to unprecedented levels. Summer '23 has brought you the key to unlocking a more dynamic and engaging future. Happy building!

For any queries on Reactive flows please reach out to support@astreait.com.