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:


Flow 1

Step 2:


Flow 4

Step 3:

Flow 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

Advertisements

8 thoughts on “Lightning Lookup for Flows

  1. I did create the lightning component, but when i try to reach it in the flow it only gives me the option ForceContent:FileUpload. My component is not showing. Any Idea what to do now?
    Probably a security thing, but i don’t know where to look im afraid

    Like

  2. I’ve been needing something like this for a while! Thanks! Could you possibly include a full example of the Component code with a real world example? With object and field name/label populated?

    Like

  3. Hi! Great solution, absolutely love it! The only problem we’re having right now is that when this Flow is run in a Visualforce Page (With Lightning Runtime enabled, https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_flows_lightningruntime.htm) the lookup doesn’t seem to function correctly. It shows the loading icon and when I type a name, it doesn’t pick anything up. Works perfectly in a normal Flow.

    Have you come across this before? Is there a solution to getting this Lookup Component to function correctly inside a Flow that is run in Lightning Runtime?

    Thanks in advance!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s