I’ve come up with a generalized method to actually make any existing Invocable Action available to a Flow as a Reactive Screen Component. I’ll be showing the results of this Wednesday morning in the Breakout Session I’m presenting with Michelle Hansen and Adam White, When Is It Best to Be Reactive? When You’re a Screen Flow.
Get all of the details here.
Petr Novotný has created an excellent LWC component for showing a Gantt like chart. Here is his write-up on the component along with links to the installation package and the source code.
Petr Novotný – Salesforce Professional ★ Certified Consultant, Architect & DEV | PRINCE2 | 15+ Yrs in IT | Global Project Lead | Helping Companies Design, Lead & Develop CRM Implementations
Throughout my numerous Salesforce implementations, I’ve often yearned for a simple means to visualize tasks on a timeline. Fortunately, I’ve discovered a solution and I’m eager to share it with you. Salesforce has an exceptional community, particularly the contributors to unofficialsf.com, from whom I’ve learned a great deal. Now, it’s time for me to give back.
With a basic understanding of Salesforce Flows and CSS, you can enhance your timeline with enriched features including different object grouping, dynamic task status visualization, and even task owner images.
The Timeline is a Lightning Web Component (LWC) designed for Salesforce Screen Flows. It works primarily with two input collections. The first collection comprises the set of items you’d like displayed on the timeline. The second collection refers to the categories you’d like to use for grouping timeline items (this could be left blank if preferred).
The magic happens thanks to the external open-source Vis.js library, which is uploaded to Salesforce as a static resource. This LWC component leverages Vis.js to effectively visualize your tasks in a timeline format.
We have a Project object under which there are Task objects. Our objective is to show the project timeline on the Project record page.
Here’s how you can achieve this step-by-step:
1. Create a screen flow with recordId as an input variable.
2. Query all the tasks related to the given project.
3. Prepare the timeline item collection from these tasks.
4. Position the LWC on the screen and populate it with the timeline item collection.
5. Finally, place the screen flow on the Project record object page
Given the basic understanding of Salesforce flows, steps 1, 2, and 5 should be quite straightforward – it’s the usual process of creating a screen flow, querying related tasks, and placing the flow on a record object page.
Therefore, in this article, let’s focus more on steps 3 and 4 where things get a bit more complex – preparing the timeline item collection and implementing the Lightning Web Component. These are the crucial steps in our process of visualizing tasks on a timeline.
Start by defining an apex-defined variable for the timeline item, followed by the timeline item collection.
During the loop, we are creating timeline items and adding them to the collection. This collection will serve as an input for the timeline LWC.
Each Timeline Item encompasses the following attributes:
• itemContent: The contents of the item. Can be plain text or HTML code.
• itemStart: The start date of the item on the timeline.
• itemEnd: The end date of the item. This is optional and can be left null. If an end date is provided, the item is displayed as a range; without it, the item is displayed as a box.
• itemGroup: A group ID to use if you wish to group timeline items.
• itemType: The type of the item. Options include ‘box’ (default), ‘point’, ‘range’, or ‘background’. ‘Box’ and ‘point’ need a start date, while ‘range’ and ‘background’ require both a start and an end date.
• itemStyle: A CSS text string to apply custom styling for an individual item, for example, “color: red; background-color: pink;”.
Within the flow, we are filling the itemContent with a picture and a task description in HTML, handling situations when a task has only a due date without a start date. Finally, we assign different colors to timeline items based on the task status: Green for resolved tasks and Red for overdue tasks.
In this step, we position the Lightning Web Component (LWC) in the screen flow, and integrate the itemCollection variable into the LWC. This ensures that the timeline displays the items we structured in the prior step.
To get started, download the package and install it in your Salesforce organization.
The package contains the following components. Allow me to explain each of them:
The true power of an effective timeline visualization lies in its potential for enhancement and customization. Picture yourself as a project manager who can, with a single click, get a comprehensive view of the entire project.
For instance, we could incorporate a refresh button into the flow. This would re-query the data, keeping the timeline updated in real time – an essential feature for managing dynamic projects.
Beyond tasks, we could extend this model to display multiple types of objects related to the project, providing a holistic, one-glance understanding of diverse project elements.
The addition of filter buttons might prove helpful too. These could help the project manager focus on key aspects like overdue tasks, upcoming milestones, or tasks assigned to specific individuals or teams.
Isn’t it wonderful to envision a tool that enables Project Managers to quickly grasp the project status and swiftly make informed decisions?
Quite intriguing, isn’t it?
Wishing you success on your Salesforce journey. Cheers!
-Petr
TimelineItem Attributes:
• itemContent: The contents of the item. This can be plain text or HTML code.
• itemStart: The start date of the item on the timeline.
• itemEnd: The end date of the item. This is optional and can be left null if unavailable. If an end date is provided, the item is displayed as a range. If not, the item is displayed as a box.
• itemGroup: Group ID. Utilize this if you want to group timeline items.
• itemType: The type of the item. Can be ‘box’ (default), ‘point’, ‘range’, or ‘background’. Note: ‘box’ and ‘point’ require a start date, while ‘range’ and ‘background’ require both a start and end date.
• itemStyle: A CSS text string to apply custom styling for an individual item, for example “color: red; background-color: pink;”.
Sample Values for TimelineItem:
• itemContent: “Data Design”
• itemStart: “2023-01-01”
• itemEnd: “2023-02-01”
• itemGroup: “deliveryGroupId”
• itemType: null
• itemStyle: “background-color:#F3E8FF;border-color:#9333EA;color:#9333EA“
TimelineGroup Attributes:
• groupId: An ID for the group. The group will display all items having a ‘group’ property that matches the ID of the group.
• groupContent: The contents of the group. This can be plain text, HTML code, or an HTML element.
Sample Values for TimelineGroup:
• groupId: “deliveryGroupId”
• groupContent: “Delivery”
Links to Vis.js Library Documentation:
Screen Flows have become an indispensable tool for Salesforce admins and developers to quickly construct guided wizards, prompts, input forms, and more without writing code. However, when it comes to look and feel, the default styling for displaying things has limited options and may not match user expectations. Many developer and third party hours have been spent building custom components or packages to help fill this styling gap instead of helping tackle more complex problems. But what if we could customize the appearance of screen flows without having to write or install any custom components?
The answer is the Salesforce Lightning Design System (SLDS), a collection of design guidelines, resources, and code samples that help you create consistent and beautiful user experiences across the Salesforce platform. The design system is intended to help developers build user interfaces that can seamlessly integrate across the platform by providing a set of styling keywords (CSS classes) that you can apply to elements to change their style, layout, and behavior. Here’s the thing: its not just for developers and designers anymore! You can take advantage of this design system directly in your Screen Flows, and its a lot easier than you might be imagining. The best part is worth repeating: this is all without building or installing any custom components.
Is this too good to be true? What if I told you that the below screenshot was built entirely using out-of-the-box configuration in a screen flow?
In this post, we’ll walk through how SLDS CSS classes can be used directly in Screen Flows to style your screen flows in a few simple steps.
Good news: you don’t have to be an expert in HTML or CSS to use this to your advantage. Better news: the more you learn about it, the more you do with it!
For this post, I will provide all of the “markup” you need to get going right away on your own, as well as a repository of examples you can use for reference, but I encourage you to learn more, because there is a lot more that is possible than what I have space to show you here.
I’ll try to keep this post light on the nitty-gritty details of how HTML works, but its important to give some context as to what’s going on. There are three key facts that work together that allow us to lightning-ify our Screen Flows:
With these three facts taken together, we can see that we can use Display Text to include Lightning Design System styling by simply including the HTML markup that uses SLDS classes merged in from a Flow Resource, like a variable, formula, or text template.
If you’re a bit lost at this point, don’t panic! You don’t have to understand this part, and if you keep following along, you’ll see how easy it is to use, whether you understand why or not. Let’s start with a basic example: let’s put an SLDS box around some text.
If you have a Screen Flow that includes some instructional text, how nice would it be to draw users’ attention to it by using SLDS’s Box utility?
The SLDS box is pretty simple, you can see the markup for it is just:
<div class="slds-box">STUFF INSIDE THE BOX!</div>How can we use this in Screen Flows without installing VS Code, firing up the Lightning Web Component Trailheads, and building a custom component? Let’s start by creating a Text Template called textInABox that has this example in it.
Important: use “Plain text” as the type of Text Template for this!
Add a Screen, and in that Screen, add a Display Text component. In that Display text component, add your textInABox resource.
Now, if you save your flow and use “Debug” to see it in action, you should see a nice rounded box with padding around the text “STUFF INSIDE THE BOX!” like this:
You can even place this inside a section’s column to constrain it to a smaller size!
Pretty cool stuff already! There are a two extra steps I think are important to really make this a practical reusable technique for use in the real world.
But if you stop here and only use what I’ve shown above, you’d have to build a separate Text Template for each lightning-styled text that you want to display, and if you want to edit the content, you’d have to find which text template has the content and go edit that. Not very reusable or maintainable. We can do better by taking advantage of a quirk of how Display Text components show HTML markup. You’ll notice that our little HTML snippet starts with <div ...> and ends with </div>. Those are what’s known as opening and closing tags. If HTML markup for an element has an opening tag, but doesn’t have a closing tag, that’s what’s known as malformed HTML and it doesn’t show up right in the page! Luckily for us, the engineers at Salesforce are very smart people and understand that just a little bit of malformed HTML could mess up the whole page, so as part of rendering the HTML from a Display Text component, they automatically look for and add closing tags for any HTML that is missing them!
How does this help us? This means that all we need in our Text Template is the opening tag, then we can put our content inside the Display Text after the Text Template, and the closing tag gets automatically added when we run the flow!
Let’s try our example now with an updated boxTemplate Text Template that has just <div class="slds-box"> without its corresponding </div>
Now when we add it to a Display Text component, we can add the content immediately after the boxTemplate resource (I like putting a line break between them for readability, it won’t affect the results)
And when we run the Flow, you’ll see it displays inside the box, just like before, even though we didn’t properly close the tag:
This enables us to reuse that boxTemplate resource wherever we need to in this Flow!
Getting pretty cool, right? There’s still one more step to go to really become practical in terms of reusability and maintenance. With what we’ve got so far, we can reuse the boxTemplate resource within this Flow, but we can’t use it in other Flows. That one last thing we need to make this reusable across Flows in our org: Custom Labels. If we add a Custom Label to the org with that HTML markup, we can reference it from any Flow, and Display Text will treat it just like it does any other resource! We can add each SLDS “blueprint” that we want to use just once now, and simply reference them where we need them. I like adding the prefix “FlowStyles_” to each Custom Label, and at the bottom of this post I’ll link you to a resource that has all my favorite reusable FlowStyles as custom labels.
To try this out, in Setup -> Custom Labels, add a new Custom Label
Using Custom Labels in a Flow is exactly the same as other resources, you’ll find them under the $Label global resource in the resource picker.
So there it is! Reusable lightning styling without building a custom component or installing a package!
What else can we do with this? I’d love to hear how this technique can be used with all the creative Flow builders out there. I’ll show a couple more examples below, and link to a resource where you can download a custom labels file that has a bunch of prebuilt SLDS blueprints ready for you to use.
Wouldn’t it be nice to show success, warning, and error messages in a way that’s familiar and expected to users? You can do that with the SLDS Scoped Notification blueprint!
<div class="slds-scoped-notification slds-theme_success" role="status"><div class="slds-scoped-notification slds-theme_warning" role="status"><div class="slds-scoped-notification slds-theme_error" role="status">How these look in the Screen Editor:
And how they look when you run the Flow:
In Summer 22, Sections got an upgrade to allow you to display a Header Label with the Section. It’s been a great feature. But there are a few limitations in its current state:
With our SLDS in Flows technique (I like the word “technique” better than “trick”, don’t you?), we can have non-collapsible, dynamic Section Headers that can be placed within a single column of a Flow Section (or spread the entire width if that’s what you need)
Here’s the markup for a Custom Label we’ll call FlowStyles_SectionHeader
<div class="slds-section slds-section__title slds-theme_shade slds-p-horizontal_small">How it looks in the editor:
And finally when we run the Flow:
Many screen flow use cases end up with a need to provide users with a link to a record, page, or external website. A plain old hypertext link simply does not capture the attention of users in the way that the use case often demands. A common way to address this is to use custom navigation components to, for instance, navigate the user to a record page when they click “Finish”. Not even that will help much if you need to give the user more than one option or place to go.
But what if we could simply style those plain old hypertext links to look like buttons? Our little SLDS technique can do just that.
Note: This example can’t really leverage (easily) the same $Label reusability, because you can’t just stick the content at the end. You’ll see what I mean.
This time, instead of a Text Template resource, let’s try using a Formula resource in the Flow. Let’s say you have a record variable in your flow called NewRecord and on a Screen after creating that record, you want to provide the user a button/link that will open the record page for that newly created record. You could create a Formula Resource like the following:
'<a class="slds-button slds-button_brand" target="_top" href="' &
LEFT( {!$Api.Partner_Server_URL_580} , FIND( '/services/' , {!$Api.Partner_Server_URL_580})) & {!NewRecord.Id} &
'">View Record</a>'Now when you place that formula resource into a Display Text component…. voila! …. you’ve got a link that is styled just like a button.
Some notes:
target="_top" with target="_blank"slds-button_brand with other button styles, like slds-button_outline-brand or slds-button_neutralA really neat use case for this for presenting a button to generate a Conga document.
Until now, this post has focused on using the Display Text component as the “host” for our SLDS styling. There is one other component that we can leverage for this technique: Data Table! If the field for a given column in the Flow Data Table component supports rich text, it will render HTML in the same way that Display Text does. Better yet: it considers text formula fields as supporting rich text! This means we can add a formula field to an object that constructs HTML using SLDS styling, add that field as a column using Flow’s Data Table, and it will render each cell for that column as user-friendly, lightning styled goodness.
You could, for example, rework the above “Link as Button” formula into a Formula Field on an object, then display a button/link for each row in a Data Table:
'<a class="slds-button slds-button_brand" target="_top" href="' &
LEFT( $Api.Partner_Server_URL_580 , FIND( '/services/' , $Api.Partner_Server_URL_580 )) & Id &
'">View Record</a>'
In the upcoming Winter 24 release, Display Text becomes one of the next Flow Screen components to achieve reactivity. Imagine all of the beautiful, reactive user interfaces that can be built by combining the lightning design system with the dynamism of reactivity! To give you a taste of the kind of power that reactive Display Text can bring to Screen Flows, I was able to make a (basic) game with just out of the box components:
The examples here are really just the tip of the iceberg in terms of what can be done with this technique, but I will leave you with a word of caution. I urge everyone using this technique to keep it light and simple. It may be tempting to try to use some of the more advanced design system blueprints, or attempt to gain very granular control over styling, but that comes at the cost of increased likelihood of messing it up, or increased maintenance overhead. Take the same approach you would take to building anything: consider balancing delivering for your users today with being able to deliver updates for them in the future.
Have fun spreading a serious user interface glow-up to your users, and be sure to share any cool things you’ve built or questions you have in the comments section below.
In the next few days I’ll add a link to a preconfigured Custom Label file and example Flow that you can use as reference, and later there will be a follow up post that dives further into using SLDS styling with Display Text reactivity in Winter 24!
Here’s a preview of what’s coming to Flow in the next couple of months!
With this release, the conversion of property editors from modals to panels picks up momentum. The first panelized property editors showed up in Flow Orchestration, and more were seen in the Flow-based marketing features that started to roll out in Summer ’23 Starter edition. In Winter ’24 panels will show up in mainstream elements: Create Records, Wait, Start, Update Records elements at all times and Action & Subflow elements and Custom Property Editors when in edit mode.
Panelized property editors have a couple of useful benefits besides look more modern and feeling more fluid. They allow the user to see and manipulate the canvas while configuring the property editor and they are a key technology needed to enable Draft Mode (with modals, you can’t really leave things partially completed, which is the whole point of Draft mode).
This feature lets you save flows that are missing required features. In Winter ’24, it’s only going to be present in Create Records and the Start element of flows with a Record-Change trigger.
Draft Mode is fundamentally intended as a usability feature to make Flow easier to work with. You don’t have to have all of your ducks in a row.
The team has been hard at work on an overhaul of the merge field picker. This component is a wolf in sheep’s clothing. It’s extremely complicated because of its need to not only support a wide range of data types but also dynamically show just the appropriate types in different contexts. The current merge field picker has served Flow well since its creation 5 years ago but there are a lot of overdue enhancements that required a full reworking.
In Winter ’24 you’ll encounter the new picker in just one place, the Create Records element. You’ll see some of the immediate enhancements, like the clickable breadcrumbs shown above. More enhancements are on the way along with a broader rollout. Developer Note: This component has been designed to be made available in the Public namespace for use in custom property editors, although the release date for that is TBD.
Transform is probably the most powerful, complex element we’ve yet created. It provides the ability to declaratively shape and mold data. It’s particularly well-paired with the HTTP Callout element because of its ability to extract useful data from the complex response structures returned from typical web calls.
The beta implementation includes. the ability to map collections from JSON structures to collection resources:
You can also apply a formula to data to shape it:
Your transformations are also supported in the debugger:
Note the following considerations on Winter ’24:
Reactive Screens is finally GA with this release. This feature fundamentally allows the creation of single-page applications and forms, reducing the amount of ‘Next’ clicking and enabling a more dynamic and satisfying visual experience.
This release brings several enhancements that flesh out the Reactive Screen toolset. Display Text is reactive (this component has been deemed Beta for Winter ’24. Note that that means you have to enable the ‘Opt in to Reactive Display Text Beta’ checkbox in Setup -> Process Automation Settings for this particular feature). That allows easy implementation of text that updates based on inputs:
The above example also leverages the new ability to use formulas reactively. That means that if you create a formula in a flow that references an input that changes, like the text fields in the example above, the formula will immediately recalculate, and anything else on the screen that makes use of that formula will update.
Choice Selections also react to changes on the screen. In this example, one set of choice settings change based on a value selected in another radio button group:
Select a Radio Button Based on Another Radio Button
Auto-select an Opportunity Stage from a Data Table
Here, you can see how it’s done, with a formula that is used to set the default value:
Formulas can mix values provided by the user with Custom Settings, Profile data and other Global Variables, as shown in this example:
Other improvements:
Record-triggered Flows in many ways provide a great toolset for custom validation checking, but have always had an inability to surface an error right to where the user is taking action. You can now choose to either surface a custom, dynamic error message as an inline field error or as a pop-up window.
A pair of radio buttons was added a couple of years ago to enable builders to control the behavior of screen components when the user returns to a screen. This was necessary because there are a bunch of valid use cases where you want the component to recalculate with updated values and other equally valid use cases where you want the component to remember what the user last provided. These slides are from a 2021 RRL where we described the new control, which was then released for Lightning Components in screens.
In Winter ’24, support for Revisited policy has been extended to Choices, Text, Number, Currency, Long Text Area, Date, and DateTime components:
You can now trigger a step to start or end with an expression that will set up a record-change listener. That means that an active stage can have multiple steps all waiting for different data changes.
Additionally, Flow Orchestration Objects now support Custom Fields and lookups.
You can choose to view the Api Version in the Flow list view in Setup.
Editor’s Note: UnofficialSF is pleased to enable commercial creators of products that use Flow like Pimly to introduce their products and demonstrate useful use cases. One of our goals is to see a rich tier of commercial solutions in addition to the many free extensions that will continue to be available.
The Pimly CEO, long time Salesforce leader Mike Milburn, published a post describing how Pimly leverages flow:
Learn more about Pimly:
Version 1.8 for Text Area Plus adds help text and a new Text Input option for standard Text Input. I’ve also added a height option for the Rich Text and Text Area modes to allow you to set a specific height in pixels for the text input box for a better UI. For full details and the install link visit the main post here.
Salesforce has just launched Pay Now, a new product that embeds commerce everywhere. It’s a faster, simpler way to collect payments without the need for a full commerce storefront.
Pay Now allows you to generate payment links in a snap, attach them to any Salesforce object, and send them off to your customers wherever they are. Voila, you’ve just created a revenue-generating transaction that can be dispatched across any channel.
Pay Now makes any object in Salesforce “payable”. Therefore, Pay Now is designed to be an embeddable building block for Salesforce Admins to embed into their workflows.
Thanks to its embeddable nature, the sky’s the limit for potential use cases of Pay Now. Here are a few key use cases of Pay Now:
In this article, we’re going to zero in on the Quote to Cash example, showcasing just how powerful Pay Now can be when used with Flow.
For those of you keen to see Pay Now in action within Salesforce Field Service, we’ve got you covered. Check out this video: https://salesforce.vidyard.com/watch/2ywBVkk6sUsj64KFAkaF9B
Pay Now comes with two building blocks out of the box. These building blocks are the defining factors of your Salesforce user and buyer experiences.
The Payment Link Object creates your Payment Links. You are able to specify the Amount, Currency Code, Payment Method Set (Credit Card, Apple Pay, etc.), Title and Description.
Once you create a Payment Link record, it is available within the Payment Links list view. From here, the Payment Link record displays all relevant information regarding the Payment Link.
Once the Payment Link Record is created, the buyer must access the page to complete their payment.
Once the payment is completed, the buyer is directed to the Payment Confirmation page.
Here’s a demo to show how Pay Now can be neatly embedded into Quote to Cash workflows. This will allow you to collect payments without straying from the Salesforce platform.
Video: https://salesforce.vidyard.com/watch/3mLZpv9oyFSuFzZKXPG2Di
The Flow works by embedding the Screen Flow into a Quick Action on the Quote Record Page Layout.
The first step of the Flow is to get the context of the Quote from which it is being called. This is done by using a “Get Records” in which the Quote Id is the Id of the Record from which the Screen Flow is triggered.
Next, we collect the necessary information from the user. We use some default values from the Quote object to save time here.
Next, we use Get and Create Records actions to do the following tasks: Retrieve the Payment Method Set ID, Generate the Payment Link Record, and retrieve the URL from the newly created Payment Link.
Next, we display the Payment Link URL on the screen to the user, giving them the option to copy the URL to their clipboard using the UnofficialSF Copy to Clipboard extension.
If the user decides to send an email containing the Payment Link, then we leverage the UnofficialSF Send Better Email action. After retrieving the Quote PDF associated with the Quote Record, we send an email to the Quote contact including the Payment Link with the Quote PDF attached.
If you have any questions or are interested in learning more about Pay Now, reach out to your Account Executive.
Editor’s Note: UnofficialSF is pleased to enable commercial creators of Flow extensions like Centro to introduce their products and demonstrate useful use cases. One of our goals is to see a rich tier of commercial solutions in addition to the many free extensions that will continue to be available.
The Avonni Flow Screen Components library is a managed package that contains over 50+ customizable UI components to enhance Salesforce Flows. This library facilitates the creation of user-friendly interfaces, improving the user experience.
The Avonni Flow Screen Components library offers various reactive UI components for Salesforce screens, catering to various needs like inputs, displays, indicators, pickers, and interactions for improved user experience. The components are designed to be “Reactive,” ensuring seamless interactions and real-time updates based on user input.
This is just a glimpse of the components within the Avonni Flow Screen Components library. To view the complete list of components available in the Avonni Flow Screen Components library, visit https://avonni-templates-dev-ed.develop.my.site.com/.
The Avonni Flow Screen Components library has a built-in Custom Property Editor that seamlessly integrates with the Flow Builder. This editor makes it easy to customize and configure your components in various ways:
The Custom Property Editor streamlines adapting Avonni Components to meet your unique needs.
Let’s dive into a practical use case where we create a comprehensive account management component. This detailed guide will lead you through designing an account management component.
Install the managed package to begin using the Avonni Flow Screen Components library. It’s free to use within a sandbox environment, and for production organizations, you can utilize it for up to 10 users at no cost. This allows you to create and test Avonni components within Salesforce Flows without any initial investment.
The accounts management component lets users:
Account Management component built with Flow Builder
We’re using the following Avonni Components to create this specific use case:
The main steps to build this component are:
Think about adding the Avonni Header at the top of your screen flow. This will give all the following components a uniform look and feel and improve the overall design and harmony of the Account Management component. It’s a small change that can make a big difference in your layout.
Now, let’s configure an interaction for the ‘New’ button present on our Avonni Header Component. Clicking this button will allow users to create a new account. Here’s how we proceed:
Adding a ‘ Section ‘ element is important before incorporating the Avonni Data Table component into our screen flow. This element is crucial because it allows us to create two distinct sections within our screen element. These separate sections allow us to easily organize and drag the desired components into their respective places. This ensures a well-structured and logical layout, paving the way for a smooth integration of the Avonni Data Table component.
Here we will configure the Avonni Data Table for our Accounts management use case. We’ll customize row selections, data source connections, column layouts, and actions and define specific interactions. Additionally, we will set filters and designate searchable fields to optimize the user experience. Let’s dive into these steps to create a robust, user-friendly table.
Let’s set up the Data Source on the Avonni Data Table. We’ll link the source to our ‘Get Records’ collection, customize the table layout by adding columns, and add ‘Row Actions’ for user interactivity. Let’s get started.
Let’s delve into setup the interactions on row actions. We’ll establish an interaction for the “Change Account Owner” action, triggering another flow for effortless account owner changes. You’ll also learn to pass the Record ID input variable to access the corresponding record in the new flow.
Now, we’ll integrate another Avonni Header component at the top of the right section of our screen flow. This will act as a gateway to manage account-specific information, operating with the Avonni Data Table. Upon account selection, the Header will dynamically display the account name. Let’s configure it.
We’ll incorporate the Avonni Progress Indicator, a key component to present the account’s status visually. This component represents progress, giving users clear insights about the account’s status.
Moving forward, the next component we’ll introduce is Avonni Tabs. This component helps organize various account information into separate, manageable tabs. By implementing Avonni Tabs, we’ll enhance user navigation, making finding and updating specific account details easier.
As we continue to enhance our account management component, the next component we use is the Avonni Formatted Value. This component is designed to provide a visually appealing display of field information. In this use case, using the Avonni Formatted Value will make the field presentation more user-friendly and intuitive.
Our goal with the Avonni Flow Screen Components library is to improve the Salesforce end-user experience through a no-code approach, offering a broad selection of fully customizable UI components that can be tailored to specific needs.
Our Vision:
We value your suggestions and ideas as we work towards these goals.
The Avonni Flow Screen Components library enhances the Salesforce end-user experience by offering a comprehensive range of customizable UI components. These components are integrated into Flow Builder, enabling you to create more user-friendly interfaces and custom business processes without coding.
To elevate your Salesforce Flows, we encourage you to install the Avonni Flow Screen Components library from the AppExchange today. Remember, it’s free for up to 10 users in a production organization. Start exploring the potential of the Avonni Flow Screen Components library and transform your Salesforce experience!
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.
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.
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.
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 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:
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:
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
There isn’t a straightforward installation package, but sample code is available in the repo here.