Replacing Programmatic Tech Debt with Flow

How Playworks used Flow to replace multiple Visualforce pages and 1000s of lines of Apex code

The use case comes from a pro bono project for Playworks. Playworks is the leading national nonprofit leveraging the power of play to transform childrenโ€™s social and emotional health. They’re a great organization, and I encourage you to learn more about what they do and consider supporting their work.

The Old Architecture

Playworks has a custom object called NCES Data, which contains information about 115,000 schools and 15,000 districts in the United States. The data is released by the National Center for Education Statistics each year, which the Playworks team then loads into their Salesforce org.

As Playworks establishes their presence at a new school, reps use a wizard to create an account for the school, along with a child record that stores the school’s current demographic information. The demographic information is important for various grants and funding. Districts are also represented with account records. School accounts, district accounts, and their respective demographic information records are created from data residing in the NCES Data object.



Reps interact with a Visualforce page embedded in a custom tab called Create New School, or they click an Add School button on the partner organization related list. Partner Organization is a junction object that allows Playworks to attach multiple account records to opportunities, where appropriate. A separate Visualforce page with its own controller is launched from the Add School button. When this occurs, a partner organization record is created in addition to the school or district account record. 


The rest of the logic remains the same. The search functionality is handled by Apex classes, and an Apex trigger creates the demographic information. Whether invoked by the Create New School tab or the Add New School button, each Visualforce page finishes with a redirect handled by a third Visualforce page with its own controller.

Thatโ€™s a lot of custom dev work, and a lot of tech debt.

  • 9 Apex classes
  • 8 Apex test classes
  • 3 Visualforce pages
  • 1 Apex trigger

The good news is the code was written by highly competent developers, and has held up for nearly a decade. The bad news is that even a minor update requires the code to be modified.

The New Architecture

Speaking in terms of business logic, there are 5 possible outcomes when a user searches the NCES Data for a school or district. 

  1. NCES record is a school or district that already has an account record.
  2. NCES record is a district that does not have an account record.
  3. NCES record is a school that not have an existing account record. The school has an NCES record for the district, but there is no account record for the district.
  4. NCES record is a school that not have an existing account record. There is no NCES record for the district. (This can happen with some private schools.)
  5. NCES record is a school that not have an existing account record. There is an account record for the district.

Each of these outcomes has slightly different requirements, depending on if it was invoked by the Add New School button or the Create New School tab.

Regardless of the eventual path for each of the 5 possible outcomes, all flows begin the same way.

First, since there are multiple account record types, the school record type is retrieved. Next, a flow screen gathers the necessary information to perform the search.

After failed attempts to recreate the Apex search functionality using a Get Records element with filter logic, a decision is made to go with code. A small portion of the existing code base is refactored into an invocable method. The method accepts the search parameters from the previous screen, and returns a list of NCES records.

public class CreateNewSchoolOrDistrictSearch {
    
    private static String maxresults = '25';
    
    @InvocableMethod(label='Search for NCES Data')
    public static List<Results> searchForNCESData(List<Requests> requests){
    
        Requests request = Requests[0];
        
        String queryString = generateNCESDataQuery(request.schoolNCESId, request.schoolName, request.schoolCity, request.schoolState, request.schoolZip);
        
        Results result = new Results();
        result.ncesRecords = Database.query(queryString);
        System.debug('NCES Records: ' + result.ncesRecords);
        List<Results> results = new List<Results>();
        results.add(result);

        return results;
    }
    
    public static String generateNCESDataQuery(String schoolNCESId, String schoolName, String schoolCity, String schoolState, String schoolZip){
        return generateNCESDataQuery(schoolNCESId, schoolName, schoolCity, schoolState, schoolZip, false, false);
    }
    
    public static String generateNCESDataQuery(String schoolNCESId, String schoolName, String schoolCity, String schoolState, String schoolZip, Boolean exactIdMatch, Boolean isDistrict){
        
        String ncesDataQuery = 'SELECT Id, Existing_Organization_in_Salesforce__c, School_Level__c, NCES_Id__c, School_Name__c, School_Mailing_Street__c, School_Mailing_City__c, School_Mailing_State__c, School_Mailing_Zip__c, School_Physical_Street__c, School_Physical_City__c, School_Physical_State__c, School_Physical_Zip__c, NCES_District_ID__c, District_Name__c, District_Mailing_Street__c, District_Mailing_City__c, District_Mailing_State__c, District_Mailing_Zip__c FROM NCES_Data__c '; 
        
        if(!isDistrict){
            ncesDataQuery += ' WHERE NCES_ID__c != NULL AND NCES_ID__c != \'0\' '; 
        }else{
            ncesDataQuery += ' WHERE NCES_ID__c = NULL AND NCES_District_ID__c != NULL AND NCES_District_ID__c != \'0\' ';             
        }
        
        if(!String.isBlank(schoolNCESId)){
            if(!isDistrict){
                if(exactIdMatch){ 
                    ncesDataQuery += ' AND (NCES_ID__c = \'' + schoolNCESId + '\') ';                
                }else{
                    ncesDataQuery += ' AND (NCES_ID__c = \'' + schoolNCESId + '\' OR NCES_ID__c LIKE \'%' + schoolNCESId + '%\') ';
                }            
            }else{
                if(exactIdMatch){
                    ncesDataQuery += ' AND (NCES_District_ID__c = \'' + schoolNCESId + '\') ';                
                }else{
                    ncesDataQuery += ' AND (NCES_District_ID__c = \'' + schoolNCESId + '\' OR NCES_District_ID__c LIKE \'%' + schoolNCESId + '%\') ';
                }
            }
        } else {
            if(!String.isBlank(schoolName)){
                ncesDataQuery += ' AND (School_Name__c LIKE \'%' + encodeForQuery(schoolName) + '%\')';                
            }
            if(!String.isBlank(schoolCity)){
                ncesDataQuery += ' AND (School_Mailing_City__c LIKE \'%' + encodeForQuery(schoolCity) + '%\')'; 
            }
            if(!String.isBlank(schoolState)){
                ncesDataQuery += ' AND (School_Mailing_State__c LIKE \'%' + encodeForQuery(schoolState) + '%\')'; 
            }
            if(!String.isBlank(schoolZip)){
                ncesDataQuery += ' AND (School_Mailing_Zip__c LIKE \'%' + encodeForQuery(schoolZip) + '%\')'; 
            }
        }
        
        ncesDataQuery += ' ORDER BY Name LIMIT ' + maxresults;
               
        return ncesDataQuery;           
    }
    
    private static String encodeForQuery (String inputVal) {
        return String.escapeSingleQuotes(inputVal.trim());
    }
    
    public class Requests{
        
        @invocableVariable(label='NCES Id')
        public String schoolNCESId;
        
        @invocableVariable(label='School Name')
        public String schoolName;
        
        @invocableVariable(label='School City')
        public String schoolCity;
        
        @invocableVariable(label = 'School State')
        public String schoolState;
            
        @invocableVariable(label='School Zip Code')
        public String schoolZip;
    }  
        
    public class Results{
        
        @invocableVariable(label = 'NCES Records')
        public List<NCES_Data__c> ncesRecords;
    }  
}

Next, the search results are displayed in a table, and a school or district is selected. Remember the results are a list of NCES data records returned by the invocable Apex. The selected NCES data record is used to create the necessary school account, district account, and corresponding demographic information record. If the school account or district account record already exists, the user is redirected.

Recall the 5 possibilities. 

  1. NCES record is a school or district that already has an account record.
  2. NCES record is a district that does not have an account record.
  3. NCES record is a school that not have an existing account record. The school has an NCES record for the district, but there is no account record for the district.
  4. NCES record is a school that not have an existing account record. There is no NCES record for the district. (This can happen with some private schools.)
  5. NCES record is a school that not have an existing account record. There is an account record for the district.

Each one of these is represented by a path in the flow. For example, if a school or district already exists as an account record, the user is redirected to that record. Before that happens, if the flow is launched from the Add School button, a partner organization is created. If the flow is launched from the Create New School tab, then it simply redirects to the school or district.


Each of the 5 possibilities is accounted for, in different branches of the flow. The programmatic complexity of the Visualforce and Apex are replaced by the flow. While complicated in its own right, the solution is now declarative.

Conclusion

While we fell short of a completely declarative solution, the logic of the search functionality is unlikely to change. By refactoring the Visualforce pages and 95% of the Apex logic into flow, the Playworks team can safely make changes in the future, without having to hire a developer.

From Teo Popa: Powerful Enhancements to the Decision Tree Sample App

from Alex: In internal conversations and conversations with customers, one of the posts I find myself sharing the most is the ‘Thousands of Screens’ post on how flow can drive record-based decision trees that are easy to edit and manage. Teo has extended the design with some clever enhancements and shares them here.

A Practical Application of the โ€œThousands of Screensโ€ Flow Pattern with Enhancements for Supporting Multiple Troubleshooter Tools-in-One, Pathway Continuation without Selection, and Exit and Return-to-Start Functionality

The โ€œThousands of Screensโ€ flow pattern (aka: the โ€œTroubleshooterโ€ pattern) is useful for providing a way for end-users to do more than just search a knowledge base for solutions based on keyword matches. It enables end-user guidance and can be applied to a multitude of contexts (i.e. service, sales, etc.).

Think of the โ€œguessing gameโ€, wherein one person thinks of a person, place, or thing in their mind, and another person asks them a series of elimination questions until they can deduce exactly what the first person is thinking. With every response, the person asking the questions is able to collect more information from the person with the solution and apply that information to adjust the questions they ask.Throughout the process, they inevitably work their way closer to the solution.The provision of a pathway to enable โ€œguessingโ€ in this game is the critical component to obtaining the solution. Without it, arriving at a solution is infinitely more difficult, if notโ€“impossible. This pathway provision is what the โ€œthousands of screensโ€ flow pattern brings to Salesforce.

By providing the โ€œthousands of screensโ€ pattern through flow youโ€™re able to utilize the native functionality of the Salesforce platform to provide a โ€œskeletonโ€ for building out โ€œtroubleshootingโ€ pathways, while empowering your end-users to manage the actual building, configuration, and content management of these pathways themselves.

The example below provides a sample application of the โ€œthousand of screensโ€ flow pattern as applied to an organization that currently uses multiple service agent โ€œtroubleshootingโ€ tools scattered throughout several powerpoint files housed on a common server. Pain points in this use case include:

  1. The troubleshooter files are cumbersome for service agents to locate and access daily from the server.
  2. When all opened and kept ready for immediate service agent use, the troubleshooter files take up valuable screen real estate from other applications.
  3. When all opened and minimized, the troubleshooter files cause confusion and waste service agent time when they are trying to locate the applicable file to maximize and use.
  4. The troubleshooter file contents have grown to hundreds of slides and are difficult for service managers to modify contents/pathways/configuration as information changes are needed over time.
  5. The troubleshooter file sizes continue to grow and impact each file performance.
  6. The troubleshooter file search functionality and pathway visualization is limited.

Supporting Multi-Troubleshooter-Tools-in-One

To begin utilizing the โ€œthousands of screensโ€ flow pattern to replace multiple existing powerpoint-based troubleshooter tools with a single Salesforce-based troubleshooter tool, we can combine the contents of the multiple powerpoint tools into a single troubleshooter tool in which the first question of the tool is, essentially, โ€Which tool do you need?โ€ (see Image 1). From this single flow screen, we can now support launching into multiple tool pathways. Additionally, we can use native Salesforce functionality to embed the single troubleshooter flow into the utility bar of the service console for easy, recurring access by service agents and pop-out ability.

These two actions combined 1) eliminate the need for multiple powerpoint files, 2) reduce the amount of screen real-estate dedicated to tools so that the agent can focus on case documentation, and 3) reduce the amount of minimized windows to comb through when searching for a tool.

Image 1: Multi-Pathway Utility Bar Troubleshooter Tool Using โ€œThousands of Screensโ€ Flow Pattern

Using DiagnosticNode (the front-end accessible record representation of a flow screenโ€™s contents and configuration) and DiagnosticOutcome records (the front-end accessible record representation of a flow screenโ€™s picklist selection values) within Salesforce, we can create a series of pathways for each tool, which in turn, can contain a series of branching pathways based on outcomes themselves, and so onโ€“all stemming from a single starting screen. Additionally, we can establish record naming conventions and ordering mechanisms that help us leverage native Salesforce search functionality and listviews to find, manage, modify, and visualize our troubleshooter tool pathways and content (see Image 2).

Image 2: Naming Convention and Ordering Examples for a Multi-Pathway Troubleshooter Tool

Pathway Continuation without Selection

The original โ€œthousands-of-screensโ€ flow pattern provided through unofficialsf.com, assumed the end user would select a response from the picklist values provided on every screen the agent passed through. However, in practice, instances do arise where end users need to be provided with information (i.e. an instructive statement) without necessarily being asked a question that warrants making a selection in order to move forward (see Image 3).

Image 3: Example of Necessary Pathway Continuation without Selection

To achieve this configuration for a particular DiagnosticNode screen, we can utilize the:

  • โ€œContinuation Nodeโ€ checkbox, and;
  • โ€œContinuationDiagnosticNodeโ€ lookup field.

Together, these identify 1) a DiagnosticNode record as a screen in a pathway that does not require a selection from the end user in order to move forward, and 2) which screen should be displayed next upon clicking the โ€œNextโ€ button (see Image 4).

Image 4: Marking a Diagnostic Node (Flow Screen) for Selection Exemption and Continuation

Exit and Return-to-Start-Screen Functionality

We can add more robust functionality to our multi-tool โ€œtroubleshooterโ€ tool by recognizing when a tool pathway ends and handling these โ€œendingsโ€ in an end-user-friendly manner. Essentially, once a pathway ending is reached 1) the end-user should be notified that no more action is required of them regarding the issue they are troubleshooting, and 2) the multi-tool โ€œtroubleshooterโ€ tool should reset so that it is ready for our end users to troubleshoot the wide variety of issues that could occur with the next case (see Image 5).

Image 5: Example of a Pathway Ending

To solve for both of these desired outcomes when a pathway ending is reached, we can use the โ€œEnd Nodeโ€ checkbox to identify a DiagnosticNode that marks the end of a pathway (see Image 6). When the end-user encounters the flow screen represented by this End Node DiagnosticNode record, upon clicking โ€œNextโ€ on this screen, they will be routed to the flow โ€œFinishโ€ screen, instead of another DiagnosticNode record. From this standard flow โ€œFinishโ€ screen, they can click โ€œFinishโ€ to reset the tool back to the initial start screen.

Image 6: Marking a Diagnostic Node (Flow Screen) for Pathway Ending

Installation

There isn’t a straightforward installation package, but sample code is available in the repo here.

New update for Datatable

There is a new update for Datatable (v4.1.1)

I’ve added reactivity for Apex-Defined objects and fixed a bug where the results of the DataFetcher component weren’t being reactive on the initial load of the flow screen. I also made the placeholder text “Enter search term …” for the Search Bar a translatable label.

You can find the latest installable package links here:

Using Named Credentials with Flow Actions

I recently built an invocable action that uses the Tooling API. I had been hoping to handle authentication automatically using SessionId, but this action needs to be able to work in background flows like record-change triggered flows, and there’s no obvious SessionId in those cases. So I ended up setting what I’ll call ‘proper’ authentication. This incorporates three elements: a Connected App, an Auth. Provider, and a Named Credential.

It’s a little counter-intuitive to have to set up this kind of authentication because we’re trying to use a Flow on an org to call other apis on the same org. Ideally, we’d be able to make that call directly. But some APIs like Tooling API treat even the calls from the same org as public incoming calls. That means we have to create this authorization to allow our flow actions to loop back into our own org.

The relationship between the different security entities has been discussed in some previous posts.

Here’s the approach I used.

1. The invocable action should be designed to take a Named Credential.

2. Start by creating a Connected App.

Here’s an official Help doc

3. Add an Auth Provider.

Here’s the second help page.

4. Create a Named Credential that references the Auth Provider

Here’s the third help page.

5. Assign the Named Credential in Two Places

There are some new requirements for providing access to Named Credentials. You need to explicitly authorize a profile or permission set to use the Named Credential:

Additionally, you now need to create a personal setting for each Named Credential:

Check out the Latest Datatable Enhancements

It’s been a few months, but I hope it has been worth the wait for some of the fixes and enhancements you’ll see in the latest version of Datatable.

I squashed a couple of bugs including:

  • An invalid format error when entering a filter value for a Name column when it was being displayed as a hyperlink to the record
  • Occasional Daylight Savings Time issues with Time fields

A few of the minor enhancements are:

  • A spinner rather than an empty table message will be shown while records are being processed
  • A Clear All Filters button will be displayed when any column filters are applied
    • This avoids the issue of getting stuck when a filter value causes an empty datatable
    • The button can still be disabled by selecting the Hide Clear Selection/Filter Buttons option in the Table Behavior section
  • When the number of displayed records are filtered and/or reduced based on a search term, the header will show both the filtered count and the total record count
  • I switched the Column Wizard setup flow to be loaded by a LWC component rather than an Aura component
    • This provides cleaner exit behavior and eliminates conflicts with development mode and clickjack protection
    • NOTE: You do now need to activate the Datatable Configuration Wizard flow after installing this version
  • The maximum displayed record count has been increased from 1000 to 2000 records

The two big enahancements are the addition of an optional Search Bar and the ability to set a Column Width as Fixed or Floating.

The Datatable will simultaneously support both a Search term as well as individual Column Filters.


With the new Flexible Column Width enhancement, you can now fix some columns to be wide or narrow and allow the remaining columns to flex their width to expand or contract to fill the available space for the Datatable.

Before this option, if the column widths were too wide for the screen, the user would have to horizontally scroll back and forth or manually change column widths to see the full Datatable.


Now, the Column Wizard lets you select all or none of the columns to flex or you can specify individual columns to have their width flexed to fit the screen.


Check out the updated documentation and get the latest installation links here.

Retrieve Flow Metadata Synchronously with ‘Retrieve Flow Metadata’ Action

The community has built some powerful tools that enable flow metadata to be retrieved, modified and deployed. These tools were used, for example, in the unofficial Convert Process Builder tools. However, these tools make direct use of the metadata api, which is asynchronous. That means that they have to be deployed in the form of a screen flow that fires off the request and then sits there and polls for a result. That’s not useful if you’re running an autolaunched flow on the server.

Server-side flows can retrieve Flow metadata synchronously, via the Tooling API. This powerful interface is not as well known as the Metadata API, but has a lot of capabilities. One powerful facet of this API is that it returns the Flow metadata as a Metadata Apex object that can be manipulated via direct references in code:

This is, for many use cases, a lot nicer than parsing XML, which is what the Metadata api serves up.

I had a use case (involving the training of GPT models to generate flows) where I wanted the synchronous immediacy of the Tooling API (so I can trigger it on background events) and the XML return values that the Metadata API returns. It turns out that this is trivially easy, but it’s not well documented, and I had to consult a senior engineer to learn about it.

You can retrieve XML via the Tooling API, but you need to use the Accept header

The Tooling API is used via REST, and in REST calls to Salesforce, you can set the ‘Accept’ header like so:

req.setHeader(‘Accept’, ‘application/xml’);

This will not be done by default. Most Tooling API calls do not return a traditional SObject and the developers using those calls are happy to skip the XML and work with JSON. If you leave this header out and try to carry out XML parsing with what comes back, you’ll just get odd errors like this:

Error Occurred: An Apex error occurred: System.XmlException: Failed to parse XML due to: only whitespace content allowed before start tag and not { (position: START_DOCUMENT seen {… @1:1)

The Retrieve Flow Metadata action that’s installable below does this work for you, so you can simply insert it into a flow to retrieve flow xml synchronously, by flow name. Here’s where I set the REST header:

Querying by Flow Name is Not Intuitive

The second tricky bit I ran into involved my goal to query on the flowName. I didn’t have the ID. That’s a problem because the Tooling API has two modes and neither directly uses a name. ‘Easy Mode’ is focused on requesting records by their ID. Here’s an example:

If you want to use anything other than a recordId, the good news is that the Tooling API gives you the full power of SOQL queries. Here’s an example of how you query for a piece of metadata that’s confusingly named MetadataContainer:

At this point, I thought I was all set. I posted up this tooling query that queries by Flow Name :

url = baseUrl + '/services/data/v57.0/tooling/query/?q=Select+id+from+Flow+Where+FullName=\'' + flowName + '\'';

When I did this, though, I got this error message:

INVALID_FIELD Select id from Flow Where FullName='Test_MetadataRetrieval' ^ ERROR at Row:1:Column:27 field 'FullName' can not be filtered in a query call

A closer look at the documentation revealed that FullName is indeed explicitly disallowed in Tooling queries:

Thinking it through, this has to do with the fact that there are actually as many as 50 versions of metadata tied to a single flowName. The flowName is thus less unique than it might first appear.

The documentation does not make it clear just how you’re supposed to use multiple queries if you can’t query on name. However, the answer turns out to be to use Definition.DeveloperName:

String url = baseUrl + '/services/data/v57.0/tooling/query/?q=Select+id,Metadata+from+Flow+Where+Definition.DeveloperName=\'' + flowName + '\'';

FlowDefinition is a special object that basically stores which flow version is active. It isn’t used much these days.

With these new learnings, I was able to create Retrieve Flow Metadata action.

Considerations

This action so far is unaware of version numbers. It’s just going to grab whatever is handed to it, which is going to be either the Active version or the Latest.

Authentication Considerations

This action provides a way to provide the name of a Named Credential. If you do that, it will use the NC. If one is not provided, it will try to use the SessionId. Be aware though that SessionId will only work for screen flows.

Install

Version 1.0.2 6/5/23 Production Sandbox added Named Credential support

Previous Versions

Version 1.0 5/12/23 Production Sandbox First Release

View Source

source

Reactive Screens: How to Turn a 7 Element Flow Into 1

When Winter โ€™23 release arrived, it brought with it Data Table and IN operator. I was excited to use them and wrote a blog on how it helped me solve a use case that was not possible to achieve with standard reports. I was happy with the 7 steps flow I created to achieve this
Now, a few releases later, Summer โ€˜23 is around the corner, and with it comes reactive screens and reactive formulas. I went back to my solution and was able to get the same result and reduce a 7 step flow to 1 screen. How awesome is that!!!

Reactive screens are currently in beta and you can try them out in a prerelease org running Summer โ€˜23 (don’t forget to opt in to the reactive screens beta under process automation settings in setup)

Here is how I did it

Reminder use case: display all open opportunities where the selected user is on the account team. Then display the account team role this user has for these accounts.

I used the new Data Fetcher component from Josh Dayment, and combined it with some complex SOQL queries that output the results into a Data Table.

To select the user, I added a lookup to the screen. This is currently the only reactive lookup element available. In order to get a list of users, you can point the component to any CreatedById lookup field from any object. I used the Account object.

My first formula (and make sure to use a formula resource, and not a variable or text template for this, as only formulas are reactive. Donโ€™t ask me how I know ๐Ÿ˜‰) queried the records for open opportunities

I fed this formula into the first data fetcher, and used a merge field to get the currently selected user from the screen.

The data fetcher queried records are displayed on screen using the Data Table component (Data Table is now GA, and also got some new enhancements in the summer release). The lookup component outputs the selected value and the selected label so I used another little formula to dynamically display the selected user name in the table title.

A similar process followed for the second table and showing the account team role

Look what I could achieve with just 4 formulas and one screen. Here is a demo of the finished flow and reactive functionality.

I canโ€™t wait for this to be generally available to help us simplify multiple flows. For now this is only available in prerelease orgs and soon in sandboxes.

New Collection Action – Return First N Records

I’ve added a new action to the library of Collection Actions. This action will take, for input, a collection of records and a count then it will return, for output, a collection of records along with a count of how many records were returned.

The primary reason I created this action was to address the desire to programatically specify the number of records to keep in the standard flow Sort element. Currently, you must hard-code that value when configuring the Sort element.


With this new action, you can take the entire output of the Sort element or any other record collection and then use a flow resource (variable, formula, etc) to specify how many records you want to keep.


If there are more records in the input collection than the number requested (N), it will return the first N records. If there are fewer records in the input collection than the number requested, it will return the entire collection as well as a count of the number of records in the output collection.


Attributes

AttributeTypeNotes
INPUT
Input CollecionSObject CollectionCollection of Records
Record CountIntegerNumber of records to keep
OUTPUT
Output CollecionSObject CollectionCollection of Records
Return CountIntegerNumber of records returned

Installation

This component is installed with the Collection Actions package version 3.1.0 or later.


Release Notes

4/24/23 โ€“ Eric Smith โ€“ v1.0

Initial Release

Previous Versions


View Source

Source Code

Reactive Screen Component Demonstration

Now that we have the ability to have different components on the same flow screen be reactive to each other, I wanted to create a fun demonstration on how you can have the inputs for one component be reactive to the outputs from one or more other components. For this demonstration, I decided to recreate a matching game called Concentration.

I created one component that displays a card with either the front, back or a blank being shown. The other component is a game controller that fires whenever a card is turned over. The controller component compares the last two selected cards and provides an output that lets the card components know what to show on the screen.

You can install the package and try it out for yourself. It includes the two LWC components, a screen flow and some static resources containing the images.

Production or Dev org installation package.
Sandbox installation package.

Once installed, just run the Flow called “Concentration Game”.

To see how I put all of this together, you can review the source code here.


Data Fetcher on the AppExchange

Data Fetcher is a Lightning Web Component for Screen Flows that will query records based on a SOQL string, then provide an output of records (or single record) to be used on the same screen. What is so special about that you might ask? Well, let me tell you! With the reactive components beta for Screen Flows, you can now have components on a single screen react based on input from other components without ever leaving the screen. Data Fetcher was featured at TDX ’23 as part of a session on reactive screen components.

Let’s take an example using components from here on UnofficialSF. With Data Fetcher I can accept the selected choice value from Quick Choice* as my SOQL string and return records into a Data Table without having to click next. The records in the data table change depending on the choice I select – instantly. Before getting started ensure you have opted into the Reactive Screens Beta in Automation settings in your org instructions can be found here

Before reactive screens, this would have been accomplished using Lightning Messaging Service and Lightning Web Components, increasing the time to develop and go to market for this type of use case along with the costly maintenance of that LWC. With Data Fetcher an admin or developer can dynamically retrieve records on one screen without much additional lift, greatly enhancing the overall user experience and freeing up time for the admin or developer to work on other features for more important tasks.

In Summer ’23 formula resources will be reactive in flows – making this component significantly more powerful. With reactive formulas, Data Fetcher’s SOQL query string can now reference multiple components on the same screen which will create a truly dynamic experience. Pre-release orgs have already been enabled if you want to start testing now. Let’s look at a couple of examples.

The first example will use two Quick Choice components to help build my query utilizing a reactive formula. I will use the Quick Choice components to have the user select the Industry and Account Type of the Accounts I want to return on the Datatable those values will be used in a formula to return my SOQL string. (I am not doing it in this example but there is a really great video walkthrough on how you could use Quick Choice as a dependent picklist on the original post that could really enhance this use case)

//You can use this example to get started on your own formula//

"SELECT BillingCity, Id, Name, Phone, Industry, Type FROM Account WHERE Industry =" + {!choice.value} +" AND Type = " + {!Type.value}

In the below video, I am using the out-of-the-box lookup component to pass an Account Id to a SOQL string to populate all of the related contacts in a data table. A couple of years ago I presented on Automation Hour about using SOQL and SOSL in flow if you watch this video I had to build a SOQL query across multiple screens and decisions in order to perform the query inside of the flow. This Summer that will no longer be needed! Soon, an admin or developer will be able to add multiple components onto a single screen and use a formula variable to build a SOQL statement that then passes back the records on the screen as the user is interacting and/or changes different parts of the query and see the results as the changes are happening.

Note: Choices are not yet reactive as part of the beta. You will need to use Quick Choice if you want to bake choices (like a Picklist) into Data Fetcher queries.

For more information and to install Data Fetcher visit the AppExchange Listing here.

Learn more about the Reactive Screen Components Beta on Trailhead!