Turn Invocable Flow Actions into Reactive Screen Components
Created by Eric Smith
This Post was most recently updated on: 9/10/23
Current Version: 1.0.0
Invocable Flow Actions are a great way to use specialized code to add declarative building blocks to your Flows. They can take one or more inputs, perform some background processing, and then return one or more outputs back to your Flow. There are a bunch of standard actions available in the Flow Builder such as Send an Email, Post to Chatter, Submit for Approval along with many custom actions available on the AppExchange and here on unofficialsf.com.
Flow Screen Components can be used to collect user input as well as to organize and display information on the flow screen. Standard screen components are used to do things like upload files, input text, numbers, emails, urls, etc along with a display text component to show formatted information. Custom screen components provide additional capabilities like drawing a line, displaying a datatable with inline editing, adding custom buttons, dependent lookups, copying to clipboard, inputting rich text, and many more.
Until recently, the typical way many Screen Flows were designed was to present a screen to collect user input and move to the next step once the user clicked the Next button. After the screen, the flow could access the data from the screen and draw on standard and custom actions to do some processing before displaying another screen with the results of that processing.
Now, with the ability to have individual screen components react to the outputs of other components on the same screen, we can build interactive flows that reduce click fatigue by keeping much of the input, processing and display on a single screen. I think these single screen flows will be a big part of building immersive applications in the future.
The key to doing all of this is being able to move specialized processing out of the Flow Canvas and onto the Flow Screen. There is a great example of this already with the AppExchange DataFetcher component that can execute a SOQL query based on values provided by the user and pass the results to another component, like a datatable, all on a single interactive and reactive screen.
I’ve come across multiple use cases where I wanted to take the capability of an invocable action and move that onto a reactive screen to do things like sort, filter, extract, calculate, compare and more all on the fly. Many of these invocable actions are part of a package of Collection Processors available here on unofficialsf.com.
One use case involves displaying a collection of records in a datatable and showing a subtotal summary below the table based on only the records the user selects in the datatable. The results change on the fly as the user selects and deselects various records. The solution uses a reactive screen version of the Collection Calculate invocable action.
Another use case presents a series of picklist selections where the options shown for each picklist are dependent on the prior selections made by the user. This solution uses a collection of custom metadata records to define the dependencies. The DataFetcher action queries the CMDT based on the user’s selections, then a reactive screen version of the Extract Strings from a Collection action processes the output from the DataFetcher and sends back a deduped text collection of values from the CMDT to pass into a QuickChoice component to display the next set of picklist values.
I’ve come up with a generalized method to actually make an existing Invocable Action available to a Flow as a Reactive Screen Component. Feel free to skip the technical details in the next section unless you are curious as to how this is done.
This is all possible because:
- Flow Screen Components can be created with Lightning Web Component (LWC) code.
- LWCs can call AuraEnabled Apex methods (Controllers)
- Apex controllers can call other Apex components
- Invocable Actions are created with Apex code and they can be called by other Apex code.
I’ve created the various components required to do this as a fully commented template that takes you through all the steps needed to build each of the pieces that ties all of this together.
Lightning Web Component
- Expose to a flow screen
- Duplicate all of the input and output attributes used by the Invocable Action
- Provide any default attribute values if needed
- Track all attributes that need to be reactive and pass changes back to the flow
- Display an optional error message
- Call the AuraEnabled Apex Controller that will interact with the Invocable Action
- Pass the results back to the flow
Apex Controller
- Define each of the attributes to be passed into this controller by the LWC and then passed to the Invocable Action
- Define each of the attributes to be returned by the Invocable Action and then passed back to the LWC
- Execute the Invocable Action
- Handle conversions of attribute types
- Return the results back to the LWC
Apex Controller Test Class
- Add tests to exercise the various capabilities of the Invocable Action
- Add tests to generate exceptions
Installation
Production or Developer Version 1.0.0
Sandbox Version 1.0.0
Release Notes
9/5/23 – Eric Smith – v1.0
Includes the following actions:
Previous Versions
Production or Developer Version 1.0.0
Sandbox Version 1.0.0
View Source
