How to use Lightning Components in Flows

Who is this for? Salesforce Administrators

A flow is an application usually built by Salesforce administrators that asks you for inputs and does something in Salesforce based on those inputs. Flows are designed using Cloud Flow Designer which has a bunch of tools that allow for automation of business processes without the use of custom code. You can do many things from a flow like execute logic, interact with Salesforce, call Apex classes, collect data from user with screen elements, etc. Recently, in Winter 18, a new feature was released to allow the use of Lightning Components in Flows which is the focus of this blog post.

Using Lightning Components in Flows

The ability to add Lightning Components in Flow means that the flow screens can do much more than just inputs, choices and outputs. With the use of Lightning Components inflows we can make the flow much more interactive and achieve more. Here are a few examples of what we can do with Lightning components inflows

• A progress tracker
• Ask different input based on previous values
• Record selection
• Displaying data
• Embedding video, images, etc

How It Works

Once the Lightning Component is developed and ready to use, you can follow the following steps to add a Lightning Component to your flows.

1. Open the flow screen on which we want to add the lightning component. The key points to make lightning components available for flow screens are as follows:
   • Lightning component should implement lightning:availableForFlowScreens interface
   • To make an attribute’s value customizable in the Cloud Flow Designer, add it to the component's design resource. This will allow the flow admins to pass values between that attribute and the flow when they configure the screen field.
2. Drag and drop the Lightning component element on to the screen.
   

   
3. Map the flow variables to Lightning Component attributes
   • Set a unique name for the component
   • Select the lightning component
   • Use the Inputs tab to set an attribute using values from the flow. Use the Outputs tab to store an attribute’s value in a flow variable.
   • Save the screen, save and activate the flow.

Here is how this flow looks when we run it using the Debug option.

Embed flows in Lightning Communities

In Winter’18, there was another new feature that allows users to embed flows in Lightning Communities. There are multiple use cases for this feature. The ability to publish surveys for community users to complete is one such use case.

Using Quick Actions to launch Flows

Lightning Flows with screens can also be launched using Action. Here are key points to keep in mind while setting up Quick Actions to launch Flows.

• Flow Type: Flow actions support only flows that include screens.
• Flow Status: The flow must be active. If you later deactivate the flow, the action doesn’t appear at runtime.
• Action Types: Flow actions are available only as object-specific actions.
• Action Title: The title that appears on the modal is the action’s label instead of the flow name. We recommend entering the flow name as the action label.
• Input Variables: Flow actions let you pass the value of the record's ID field into the flow, but that's it. If your flow has a Text input variable called recordId, the action passes the record's ID into that variable at runtime. If not, it doesn't and the flow tries to run anyway. This is a very useful feature that users can utilize to build flows using lightning components to accomplish lots of different things.
• Help Text: A flow action’s screen-level help text isn’t available for feed-based page layouts.

Resources:

• Configure Components for Flow Screens
• Trailhead: Add a Flow As an Action on a Record

Read also Salesforce Lightning components overview