Using Lightning Component In Flows

By Raj Vakati April 2, 2018 Flow, Lightning 0 Comments

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.