Lightning Component For Lookup


15 Feb 2017

There can be a situation where you want to add a kind of lookup on page to allow users to select any record. A very common example is to assign owners/users to records on a form.

If you are developing lightining components, then it will become very difficult as you have to build everything from scratch using lightning standard components and lightning design system to match look and feel. There are few forums that give some ready made solutions but the best one which I encountered is LookupSobject by Tony Scott. It is a basic component that allows you to search on any object with look and feel of Salesforce.

However in many scenarios, this component cannot satisfy all needs. It needs to be updated. I have updated this component to cover following scenarios as well:

  1. Can be used within a table with every row thus handling row specific scenarios
  2. Can show already selected lookup on record if available on page load. Scenario is suppose a user is already selected then it should come as selected on page load to avoid confusion.
  3. Can be disabled on UI(Wth grey background) if no action is required for a particular row or on specific scenario.
  4. Can be used with a raw SOQL query to enhance its behaviour.
  5. Extended to allow where clause to limit records(this doesnot work for raw soql mode).

Parameters available

Attribute Required? Description sObjectAPIName Yes The API name of the SObject to search instanceId Yes An id to identify the instance the component index Optional Index to be mentioned if used in iterations label Yes The label to assign to the lookup, eg: Account pluralLabel Yes he plural label to assign to the lookup, eg: Accounts listIconSVGPath Optional The static resource path to the svg icon to use. listIconClass Optional The SLDS class to use for the icon. searchString Optional The search string to find. whereClause Optional The where clause string to filter on records. disabled Optional The attribute to control readonly behaviour of lookup rawSOQL Optional Pass raw soql to be executed context Optional Context with which this code is working. This is to pass into controller to run specific actions

Parameters to be used in different scenarios

Get all accounts with passed search text

<c:LookupSObject sObjectAPIName="Account" instanceId="account" pluralLabel="Accounts" searchString="{!bindVariable}"/>

Get all accounts with passed search text filtered with ‘Cold’ in rating field

<c:LookupSObject sObjectAPIName="Account" instanceId="account" whereClause="Rating = 'Cold'" pluralLabel="Accounts" searchString="{!field.valueLabel}" />

Lookup field with already selected

<!-- bindVariable already has value here --> <c:LookupSObject sObjectAPIName="Account" instanceId="account" pluralLabel="Accounts" searchString="{!bindVariable}" disabled="true"/>

Lookup fields for table in every row.

<!-- Assumption: Used within aura:iteration tag--> <!-- bindIndexVariable is a row order bind field that depicts row number --> <c:LookupSObject sObjectAPIName="Account" instanceId="account" pluralLabel="Accounts" searchString="{!bindVariable}" disabled="true" index="{!bindIndexVariable}"/>

Lookup field to use rawSOQL

<c:LookupSObject sObjectAPIName="Account" instanceId="account" pluralLabel="Accounts" rawSOQL="SELECT Account.Id, Account.Name FROM Contact WHERE Email = \'%searchString%\'" searchString="{!sectionTime.horseName}" context="filterAccountsForContacts"/>

To download all its code, you can install Lightning Utilities unmanaged package or you can also download it from Lightning-Utilities github repo.

Hope this helps. Happy coding!

Labels: Lightning, Salesforce, Component, LookupSobject


Originally published at blog.lkatney.com on February 15, 2017.

Like what you read? Give Lakshay Katney a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.