Configure the Component Markup and Design Resource for a Flow Action
Here’s sample code for a simple “Hello World” component that sets a couple of attributes.
<aura:component implements="lightning:availableForFlowActions" access="global">
<aura:attribute name="greeting" type="String" access="global" />
<aura:attribute name="subject" type="String" access="global" />
</aura:component>
To make an attribute’s value customizable in Flow Builder, 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 corresponding Core Action element.
With this sample design resource, flow admins can customize the values for the “Hello World” component’s attributes.
<design:component>
<design:attribute name="greeting" label="Greeting" />
<design:attribute name="subject" label="Subject" />
</design:component>
A design resource describes the design-time behavior of a Lightning component—information that visual tools require 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 Aura component. Use the Set Input Values tab to set an attribute using values from the flow. Use the Store Output Values tab to store an attribute’s value in a flow variable.