Reactive Screen Components (GA) | Learn MOAR Winter ’24

Learn about the Winter ’24 release with Learn MOAR! First, read this blog post to learn about Reactive Screen Components. Then, follow and complete the Learn MOAR Winter ’24 for admins trailmix to earn a special community badge and be entered for a chance to win* a Salesforce Certification Voucher. *Official rules apply. See the Trailhead Quests page for full details and restrictions.

Reactive Screen Components are Generally Available (GA) in Winter ’24

We’re beyond excited to announce the next chapter of screen flows with the official release of Reactive Screen Components in screen flows! With reactive screens, you’ll be able to deliver more dynamic, complex, and engaging experiences to your users and save development time with more reusable, modular components. 

Previously, we delivered reactivity across components and the groundbreaking reactive formulas feature where users could see formula calculations in real time without needing to progress to the next screen. We aren’t done yet! Let’s dive into what’s new with GA and talk about our Reactive Display Text (Beta).

Choice component selections are now reactive

Choice components like Choice Lookup, Radio, Picklist, Checkbox Group, and Multi-select Picklist will now react to and influence other reactive-supported components on the same screen. We’re excited to deliver choice selection reactivity GA, our biggest gap facing reactive components!

What can (and can’t) you do with reactive choice selections? Let’s dive into some use cases. 

Automatically select a choice option based on something happening in the screen

Suppose you had a case creation screen where you wanted to automatically select an “Urgent” case priority whenever somebody types in some angry words in a case subject, or automatically select a product return if somebody uses the word “return” in the subject. 

With reactive formulas, you can do this quite easily by setting the default value of your choice component to a formula. Remember that a choice has both a Label (what the user sees when they run your flow) and a Value (the thing we pass around and use in the flow). When driving reactivity with choices, ensure you always reference the Value of the individual choice.

In the above animation, we set the Case Type choice to the formula below. In it, we ensure the formula returns a valid Choice Value or Choice API name.

IF(
CONTAINS(LOWER({!Case_Subject}), "exchange"), "Exchange_Item",
IF(CONTAINS(LOWER({!Case_Subject}), "return"), "Return_Item",
null))

So awesome! We can also do automatic selections between two choices, like in the animation below where we auto-select a Return Type based on a Return Reason.

Now, let’s talk about what it can’t do (yet). While Choice Selections are reactive, Choice Options are not. This means you cannot yet grab contact records based on an Account choice, or generate new Choice Options in a Collection Choice Set. We’re working on that but, sadly, it’s not part of this release. 

Reactive formula enhancements

Introduced in Summer ’23, formulas that reference components on the same screen now calculate without needing to navigate to the next screen when using supported formula functions. Here are some nifty, new nuggets for reactive formulas coming in Winter ’24.

New function support added 

You can use exponents with the “^” function, perform text replacement with the “SUBSTITUTE”, and add months to a date with “ADDMONTHS” within reactive formulas. 

Global variable support added

This is a biggie for AppExchange partners with solutions built on Flow to create scalable architecture in screen flows. You can now reference global variables like Custom Labels, Custom Settings, $User, $Profile, and more in your reactive formulas. Want to use a dynamic value for a discount percentage using a custom setting, or a translatable custom label in your reactive component? We’ve got you covered! 

Picklist reference support added

We’ve updated reactive formulas so when they reference a picklist field (like a Data Table’s Opportunity Stage), it now works as expected. No more errors in your screen flow.

Reactivity now runs the first time a screen loads

When a field is configured to react to changes in another field on the same screen, we now update that field if there’s a valid value. For example, if you set default starting values for two fields and use a formula to add those values together in a third field, Flow Builder now calculates the third field when the screen loads. 

In another example, if you have a custom Lightning web component with a recordId input, and you set the recordId in another component on the flow screen, the flow updates the Lightning web component with the recordId when the screen loads. 

Before this change, fields that had reactivity configured weren’t updated unless the user performed an additional action, such as changing a value in a field.

Accessibility improvements

When a screen component reacts to a user’s actions based on a change in another same-screen component, you’ll now get an announcement. This new accessibility improvement also includes visibility! For example, if a component becomes visible due to a change in a field on the same screen, then a screen reader announces the following: “​​Due to your recent changes, the content on the screen has changed.”

Update your flow API versions!

For folks who were in our Reactive Components (Beta), we’ve changed the opt-in setting so that you can continue to use reactivity without upgrading API versions for your flows. The Enable Reactive Components for Specific Flow Version setting (formerly used to opt-in to the beta) is set to expire one year from now in Winter ’25. Ensure that you upgrade your flows to run on API version 59.0 and later before that release to take advantage of reactive components. 

Reactive Display Text is Beta in Winter ’24

Now perhaps the biggest crowd pleaser—Reactive Display Text (Beta)! With reactive display text, you’ll be able to show the results of your fancy reactive formulas, show record information from a Data Table selection, or summarize a user’s actions on a screen within the Display Text component. The possibilities and use cases are endless, but here are a few.

Display even more data in Data Table row selections 

Because our Data Table component stores all the information you need about a record, you can make references to your selected row elsewhere in your flow. With reactive display text, you no longer have to cram as much information into your Data Table columns if you’ve got display text summarizing the selected row in a sensical way. 

Let’s take a scenario where a travel agent selects from a list of possible vacations. It doesn’t make a ton of sense to include big images and fancy rich text within the table, so why not display it on the page along with the rest of the form?

Below, you can see some fancy looking text getting updated as the agent selects different vacation options while on the phone with a client. Best of all—no screen changes!

Setting this up in Flow is intuitive; just reference the selectedRow output of the Data Table in your Display Text component, like in the image below.

Show completion percentage for a given screen using formulas

You’ve needed a way to display the number of characters remaining in an input for a very long time in screen flows. With reactive formulas and display text, you can now show those calculations in your Display Text components! 

Watch as the form completion percentage on the top and remaining characters’ numbers changes in real time! 

What if you wanted to take this to the next level? This is more advanced, but did you know that you can use Salesforce Lightning Design System (SLDS) tokens inside Display Text as well? Using Custom Labels, SLDS, and reactive formulas, you can create an even more dynamic screen with a banner that updates its color as the user progresses through the form.

Here’s how I created the banner through Custom Labels, scoped notifications, and reactive formulas:

IF( {!casePercentageComplete} = 0, {!$Label.styleError} &  “You have completed 0% of the form.“,

IF( AND({!casePercentageComplete} > 0,{!casePercentageComplete} < 100), {!$Label.styleWarning} & “You have completed ” & TEXT({!casePercentageComplete}) & “% of the form.“,

IF( {!casePercentageComplete} = 100, {!$Label.styleSuccess} & “You have completed 100% of the form.“, null)))

And here’s what I used for the Custom Label called “styleSuccess”:

<div class=”slds-scoped-notification slds-theme_success” role=”status”>

Reactive Display Text (Beta) considerations

One of the key gaps with reactive display text is how non-text resources are represented when you compare the result to what it might look like with the server generating it between screens.

For example, numbers might lack the right number of decimals, dates won’t look the same, and currencies won’t have a currency symbol. Check out the screenshot below, showing the differences in what you can expect.

Note: Resources inside of Text Templates are not reactive. If you have a Text Template resource within your Display Text component, don’t expect it to be reactive yet. And as with reactivity in general, manual outputs and other variables will not be reactive.

We’re just getting started

The reactive components effort marks the beginning of an evolution for screen flows—so much of our screen flow future roadmap depended on it. The next frontier for us will be getting data into your screens to easily create those big, dynamic screens for your users. Be on the lookout for more posts from our team on Screen Actions, our next exciting development for screen flows!

More Learn MOAR

• Salesforce Admins Blog: Release Highlights for Admins and Users | Learn MOAR Winter ’24