Introducing Flow Buttons, Courtesy of Ryan Cox
Ryan Cox is a Technical Architect here at Salesforce, and he has built some very sweet Flow functionality. The FlowButton is a button that launches Flows. Simple concept, but no one has ever really shown what you can do with this.
Let’s start with what you can do when you put a FlowButton on a Lightning Page:
Windowshade Flows!
You can already add Flows to Lightning Pages either via the Flow page component or a Quick Action button. Both are powerful but both also have drawbacks. The Flow component takes up a lot of space on the screen and you can’t easily turn it on or off. The Quick Action buttons take up only a little space, but they pop up as modals in a form factor that often isn’t quite the right size.
What Ryan figured out is one of those things that seems incredibly obvious in hindsight: you could have the best of both words if you build a lightning page component that has two modes. It starts out as a small button that looks like this:
but when you click the button, it expands like a window shade and becomes an inline Flow:
If you want, you can have the flow pop up as a modal. You also get some powerful css-based formatting options for the button’s appearance:
You can insert FlowButtons into lightning components, but sadly only aura components. the lightning:flow runtime component is only available in aura, and lwc components can’t embed aura components (although I’d love to see someone experiment with doing this via an iframe).
<c:RC_FlowButton buttonLabel="Submit"
variant="BRAND"
flowToLaunch="Create_Contact"
showFlowInModal="true"
/>Controlling Flow Screen Navigation
Like the existing components Custom Footer Button and Navigation Button, FlowButton can control the movement of flow screens, triggering a Next or Previous transition:
You can have a set of these buttons that navigate to different parts of your Flow. Set this up by having the buttons update a flow variable, and then use that variable in a decision element:
Improved Dynamic Subflow Launching
Subflows are a powerful way to increase your reuse, but they have a major weakness in that the Subflow element requires the name of the subflow to be chosen at the time the flow is built, instead of when the flow is run.
Last year, UnofficialSF published a method for dynamically launching subflows. FlowButton improves on that method in two useful ways:
- The subflow will be launched within the same screen as the parent flow
- The parent flow only continues after the subflow has completed.
This creates a seamless experience for the user. To configure the button to be used in this mode, configure it to hide the button, automatically launch a flow on init, and progress the parent flow when the subflow completes.
If you want the master flow to transition after the subflow completes, set ‘Do Flow Action When Subflow Completes’ to true.
Example Content
There is available demo content in the full package, which is available here. The install link at the bottom of the page will only install the FlowButton component itself. (Note that to see the below example content, you’ll need to go into your profile and make visible both the Flow Components App and the Test-Flow Button Custom Tab.)
This screen shows some of the styling options:
If the button is placed on a record detail page, the recordId will be passed to the Flow.
Two example flows for dynamically launching subflows are the Flow Router and Case Status Router.
The Case Status Router flow is configured on the Case record page.
Other Examples
Some examples of how I’ve used this component in demos and VTO projects.
On a Community page
On Lightning pages
In custom Lightning components on a Flow screen
In custom Lightning components within Lightning pages
This shows a modification of the Salesforce Labs Trekkr app where the steps of an onboarding trail are completed by launching a flow. More details on this are here: Trekkr: launch flows for steps
Install
Version 1.0 Unmanaged (component only)
Version 1.0 Unmanaged (full examples)