Using Lightning Component In Flows

Introduction :

In this post, I am going to show how to use the lightning component in the flow. the example I am taking hers is search contact based on user inputs like the user will enter contact information and once the form is submitted from the flow, we will fetch the flow input and passing it the lightning component to get the contacts. To use a custom Lightning component in flow screens, configure the component and it is designed to the resource so that they’re compatible with the Cloud Flow Designer.

 Apex Class 

public class ContactsListController {
    @AuraEnabled
    public static List<contact> getContacts(String firstName,String lastName ,String email ,String phone) {
        List<contact> results = Database.query(
            'Select Id, FirstName, LastName, Title, Email,MobilePhone FROM contact where FirstName =\''+firstName +'\' OR LastName =\''+lastName+'\' OR Email=\''+email+'\' OR MobilePhone =\''+phone+'\'');
        return results;  
    }
    
}

Lightning Component

The below is the lightning component which we will use in cloud flow designer. This component will collect the input values from the flow and pass it the controller to fetch the contacts

<aura:component implements="lightning:availableForFlowScreens" access="global" controller="ContactsListController">
    <aura:attribute name="firstName" type="String" default="" access="global" />
    <aura:attribute name="lastName" type="String" default="" access="global" />
    <aura:attribute name="email" type="String" default="" access="global" />
    <aura:attribute name="phone" type="String" default="" access="global" />
    <aura:attribute name="rows" type="Contact[]" default="" access="global" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <table class="slds-table slds-table--bordered slds-table--striped">
        <thead>
            <tr>
                <th scope="col"><span class="slds-truncate">FirstName</span></th>
                <th scope="col"><span class="slds-truncate">Last Name</span></th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.rows}" var="row">
                <tr>
                    <td>{!row.FirstName}</td>
                    <td>{!row.LastName}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
    
</aura:component>
({
    init : function(component, event, helper) {
        var action = component.get("c.getContacts");
        action.setParams({
            firstName : component.get('v.firstName') ,
            lastName : component.get('v.lastName') ,
            email : component.get('v.email') ,
            phone : component.get('v.phone') 
        });
        
        action.setCallback(this, function(a) {
            if (a.getState() === "SUCCESS") {
                component.set("v.rows",a.getReturnValue()); 
            } else if (a.getState() === "ERROR") {
                $A.log("Errors", a.getError());
            }
        });
        
        $A.enqueueAction(action); 
    },
    
    
})

design.resource

<design:component >
    <design:attribute name="firstName" label="firstName" />
    <design:attribute name="lastName" label="lastName" />
    <design:attribute name="email" label="email" />
    <design:attribute name="phone" label="phone" />
    
</design:component>

Flow 

Now create a simple flow as shown below. I create a flow with multiple screens but you can create a single screen. Evey screen is having only one text field line first name, last name, email, and phone. The final is screen is the place where I am invoking the lightning component.

The below image shows how to call the lightning components from the flow designer. Use Lightning Component Extension 

configuree the input and output variable as shown below 

Add it the Lightning Record page. Now you can see your flow as shown below.  

You can able to search the contacts from the flow screen as shown below after entering the first name, last name, and email and phone.