In this section, we will give an example of how you can add a custom Lightning Component in Flows and pass data between the Flow input and the Lightning Component, and vice versa.

he following screenshot shows how you could pass parameters and values from Flow to a Lightning Component:

The last example covered in the previous section, Creating the lead finder app using Flow builder, had the last step for just displaying the ID of the record. How about using a lightning screen at the end of the Flow, where the user can edit more fields, based on the page layout set by the system administrator?

To achieve this, let's build a custom Lightning Component that us comprised of recordForm to add editing capabilities. For more information on recordForm, go to https://developer.Salesforce.com/docs/component-library/bundle/lightning:recordForm/documentation.

To make your component available for the Flow screen, the component needs to implement , lightning:availableForFlowscreens interface, and any input that will be exposed in the Flow builder needs an attribute and a design file.

For example, in our use case, we can pass the leadId to the custom component that displays the Lead Edit form. The code for the Lightning Component is as follows:

<--LeadEditForm-->
<aura:component implements="lightning:availableForFlowscreens" access="global">
    <aura:attribute name="leadId" type="String" access="global" />
    <lightning:recordForm 
    recordId="{!v.leadId}" 
    objectApiName="Lead"
    layoutType="Full" 
    mode="view" />
</aura:component>

To pass the attribute from the Flow to the component, we need to define a design file, as shown in the following screenshot: 

<design:component >
    <design:attribute name="leadId" label="leadId" />
</design:component>

Note that the design file is a required step if we want these to be available in Flows. Check the following screenshot that shows the attribute that's available as the input parameter in the Flow component:

Also note that when we add a Lightning Component to Flow, the Flow can run only in Lightning Experience. Check the following screenshot, which warns that this Flow won't work in Classic:

Once you have the Flow screens with the Lightning Components, the Flow builder components should resemble something such as the following:

On a successful run, you should see a form with a pencil icon to inline edit all fields on the layout.