In this blog, i am going to explain how to create a lightning component to use in cloud flow designer.Make your custom Lightning components available to flow screens in the Cloud Flow Designer by implementing the lightning: availableForFlowScreens interface. After defining the component you need to add design resource to your component bundle. 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. It contains attributes that are available for admins to edit in the Cloud Flow Designer.
Step1:- Create a Component
create a new lightning component as shown below. In order to use the component in cloud flow designer, you need to implement lightning:availableForFlowScreens interface.
Open the Cloud Flow Designer From the Setup Drag the appropriate screen element onto the canvas as snow below.
Now from the Add Field Section Drap and Drop the lightning component from the extension section as shown below
Now add the Unique name and then select the lightning compoent from the dropdown
Create an input and output variable as shown below
Now set starting element to the flow.
Save the flow
Activate the flow
Step3: Add to the Salesforce UI
Now you can add the flow the Salesforce user interface . in this example I am just adding the flow to the opportunity record page. Go to the opportunity records on lightning and edit the page drag and drop the flow component to the page as shown below
Save the record page.Now you can go to opportunity records to see the lightning component output that was invoked from the flow as shown below