Using Lightning Component In Flows
Introduction :
Apex Class
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
({ 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
|
1 2 3 4 5 6 7 |
<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.
