Lightning Lookup for Flows

Have you ever created a Lookup in your Flow? If you haven’t, then be happy you have a slick way to do that. If you have, I know how much of a pain it was and trust me it I never liked it. You have to use those Dropdown Lists together with Dynamic Record Choices to get close and guess what is the worst part – when rendered, it is a VERY LONG picklist of records. Absolutely zero on User Experience. It lacked all the goodness of a typical Classic or the new stylish and fancy Lightning Lookups. No way to search, no suggestions when you type, no additional columns are displayed – Oh God nothing!

However, there is an end to this despair – I might have a solution and yes with hardly any code. You do not have to be a Lightning Component geek to build this.

The Problem

How do we do Lookups in Flows today?

So what we usually do is use a Dropdown List in the Flow and get all the records using Dynamic Record Choice.

Here is an example of the same –

Shortcomings of the Dynamic Record Choice + Dropdown List

Dynamic Record Choice is really a great feature if your Org contains very few records. Selecting a record from a list of 5 or 10 records is no big deal. But what if your Org contains 2000 or above records ? Do you think selecting a record or an option from a 2000+ dropdown list is an easy task ? Wouldn’t it be awesome if we could build something like we have in Salesforce’s Lightning UI i.e you just start typing the word and you get the matching records.

Existing Solutions

If you wanted to build such an UI, the existing solution we have is building complex Lightning Components that replicates the same user experience provided by the standard Lightning Record Pages. But don’t you think that is a herculean task. Tons of hours will be spent building such complex UIs.

The “lightning:inputField” Magic

Yes, we have lightning:inputField tag to the rescue.

Recently, Salesforce introduced two new tags: <lightning:recordEditForm> and <lightning:inputField>.

<lightning:recordEditForm objectApiName="Contact">
    <lightning:inputField fieldName="AccountId" />
</lightning:recordEditForm>

So all that we have to do is use the attribute of <lightning:recordEditForm> component, i.e ‘objectApiName‘ to specify the API Name of the Object. Think of it like the ‘standardcontroller’ attribute on the <apex:page> tag.

The next tag is <lightning:inputField>. This tag is usually appended as a child of the <lightning:recordEditForm> tag as shown above. Also make sure you specify the ‘fieldName‘ attribute of  <lightning:inputField> tag with the API Name of the field that you would like to use (which in our case would be any lookup field). Whichever field you enter in that attribute, it’s type would be respected, just like our old <apex:inputField> tag.

Let us build it

Now let us see how we can build this. Trust me it ain’t tough at all.

Firstly, you will have to create a Lightning Component which you can use in Flows. Here is the code for it –

Component Markup

<aura:component implements="lightning:availableForFlowScreens" access="global">
    <aura:attribute name="objectApiName" type="String" access="public" />
    <aura:attribute name="fieldLabel" type="String" access="public" />
    <aura:attribute name="fieldName" type="String" access="public" />
    <aura:attribute name="selectedRecordId" type="String" access="public" />
    
    <lightning:recordEditForm objectApiName="{!v.objectApiName}">
        <label class="fieldLabel">{!v.fieldLabel}</label>
    	<lightning:inputField fieldName="{!v.fieldName}" onchange="{!c.handleOnChange}" />
    </lightning:recordEditForm>
</aura:component>

Please don’t be intimidated looking at the above code snippet. No, it isn’t tough. Let’s dive deep now –

1. You have 4 aura:attributes on the top –
   • objectApiName – you can use this to specify the name of the object where the Lookup field resides
   • fieldLabel – a friendly label for your Lookup field
   • fieldName – API Name of the Lookup field
   • selectedRecordId – the aura:attribute that would store the Id of the selected record
2. Now you have the magic component that simply uses the attributes –

<lightning:recordEditForm objectApiName="{!v.objectApiName}">
    <label class="fieldLabel">{!v.fieldLabel}</label>
    <lightning:inputField fieldName="{!v.fieldName}" onchange="{!c.handleOnChange}" />
</lightning:recordEditForm>

Component Controller

({
    handleOnChange : function(component, event, helper) {
        component.set( "v.selectedRecordId", event.getParams( "fields" ).value );
    }
})

This function will be invoked when you make a selection in the lightning:inputField. The selected record Id will be captured on the aura:attribute – selectedRecordId.

Design Resource

<design:component>
    <design:attribute name="objectApiName" />
    <design:attribute name="fieldLabel" />
    <design:attribute name="fieldName" />
    <design:attribute name="selectedRecordId" />
</design:component>

The Design Resource defines which all attributes on your Lightning Component should be made available to your Flow.

Style Resource

.THIS label.slds-form-element__label {
    display: none;
}
.THIS .fieldLabel {
    font-size: .75rem;
}

 

Once you have successfully created the Lightning Component in you Org, the next step is to create a Flow with a Screen in which the users can select the Account via our Lightning Component. And trust me, the Flow is pretty easy. It just contains one Screen Element.

Step 1:

---

Step 2:

---

Step 3:

DEMO

Here is a short video demoing how you can build it on your own and a glimpse of how it works –

 

Here is a link that you can use to install this in a click – https://login.salesforce.com/packaging/installPackage.apexp?p0=04t0I000000bCdd