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.

accountPage-createContact-1.png
accountPage-createContact-2.png

Two example flows for dynamically launching subflows are the Flow Router and Case Status Router.

flows.png
flowBuilder-flowRouter.png
flowRouter.png

The Case Status Router flow is configured on the Case record page.

flowComponents-caseStatusRouter.png
flowBuilder-caseStatusRouter.png
caseStatusRouter.png

Other Examples

Some examples of how I’ve used this component in demos and VTO projects.

On a Community page

community-submitInvoice1.png
community-submitInvoice2.png

On Lightning pages

ads-createMarketingPrograms.png

In custom Lightning components on a Flow screen

weecycle-gearOrderFlow.png

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

trekkr-trailStep1.png
trekkr-trailStep2.png

Install

Version 1.0 Unmanaged (component only)

Version 1.0 Unmanaged (full examples)

Source

View source (component only)

View source (Ryan’s main project)

Subscribe
Notify of
guest
6 Comments
Inline Feedbacks
View all comments
Marc-Adrien Paris

Excellent Work Ryan !
Hope a working LWC embed version will come soon as Aura is not my cup of tea 😉

Bill Hahn

Ryan Cox super code-slinger strikes again! Tech savvy with fit-n-finish. Great work Ryan. WAY COOL!!!

munawir

seems like the horizontal align not working

Bailey

slds-button_stretch in the button css section worked for me, after hours of googling.

Adam

Hi Ryan,

I absolutely LOVE this component, but there is one small (probably very simple) thing stopping me from using it to it’s potential. Please help!

How do I pass the recordId of the record where the button is being clicked to the targeted flow? e.g. In the Flow input variables, I need the right syntax to do something like this: [{“name”:”recordId”,”type”:”String”,”value”:”{$!recordId}“}]

Maria Belli

This button is great! I am trying to use this with the UpdateScreen component (https://unofficialsf.com/the-update-screen-flow-action-component) but noticed that while I can get it to refresh the record I launch the flow from it won’t refresh the related list. The UpdateScreen component works perfectly on an Action button but since I am using Case, an action doesn’t show up as a button. Any thoughts on how to use this button component and the other component together?

Last edited 1 month ago by Maria Belli