Lightning Components for Flow Screens

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.

<aura:component implements="lightning:availableForFlowScreens" access="global">
    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
    <aura:attribute name="subject" type="String" default="World" access="global" />

    <div style="box">
      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
    </div>
</aura:component>

Add the flowing code to designer resource for the above component.

<design:component label="Componet for Flow">
    <design:attribute name="greeting" label="greeting"  default="Hello"  />
    <design:attribute name="subject" label="subject" default="World"  />
</design:component>

Step 2: Create a flow

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