Newer Version Available

This content describes an older version of this product. View Latest

Configure the Component Markup and Design Resource for a Flow Action

Make your custom Lightning components available as flow local actions by implementing the lightning:availableForFlowActions interface.

We recommend that you omit markup from local actions. Local actions tend to execute quickly, and any markup you add to them will likely disappear before the user can make sense of it. If you want to display something to users, check out Customize Flow Screens Using Lightning Components instead.

Tip

Here’s sample code for a simple “Hello World” component that sets a couple of attributes.

1<aura:component implements="lightning:availableForFlowActions" access="global">
2   <aura:attribute name="greeting" type="String" access="global" />
3   <aura:attribute name="subject" type="String" access="global" />
4</aura:component>

Mark your resources with access="global" to make it usable outside of your own org, such as to make a component usable by a flow admin in another org.

Note

To make an attribute’s value customizable in the Cloud Flow Designer, add it to the component's design resource. That way, flow admins can pass values between that attribute and the flow when they configure the Local Action element. That way, flow admins can pass values between that attribute and the flow when they configure the corresponding Local Action element.

With this sample design resource, flow admins can customize the values for the “Hello World” component’s attributes.

1<design:component>
2   <design:attribute name="greeting" label="Greeting" />
3   <design:attribute name="subject" label="Subject" />
4</design:component>

A design resource describes the design-time behavior of a Lightning component—information that visual tools need to allow adding the component to a page or app. Adding this resource is similar to adding it for the Lightning App Builder.

When admins reference this component in a flow, they can pass data between the flow and 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.

In this example, the Inputs tab sets the Greeting attribute to Hello and the Subject attribute to World.

In a Local Action element, the Greeting attribute is set to "Hello" and the Subject attribute is set to "World".