Generic Multi-Select Lookup Component

1.3K

Multi Select lookup or pick list selector is one of the important components in the Salesforce Application. We have a Lookup and Multi Select Pick list component in Screen Flow that will support multi-selection but for selecting multiple options we have to search again and then pick an option. For an end user, this could be a problem for multi-option selection. In this post, we will create a generic multi-select lookup component that can be used in a flow, other lightning web component, or lightning app builder page.

The component will also support showing additional 2 fields in choice. These additional fields are optional.

Check our other blog Multi Select Lookup in Screen Flow for standard multi-select lookup.

Steps for creating a generic multi-select lookup component

1. Creating Apex Class for Lookup
2. Creating Generic LWC for Multi-Select Lookup Component
3. Test Component in Flow
4. Test Component in Another LWC

1. Creating Apex Class for Lookup

Let us create an apex class that will search based on input criteria. We will create a searchRecords method which will require data in SearchRequest data wrapper. This wrapper has below properties

Property	Description
searchKey	input text for searching records in object {objectName}. This will be searched as like in {titleFieldName} field.
objectName	Object API for lookup
titleFieldName	Field API for options
subTitleFieldName	Field API for options. This will be shown as additional field information like SalesforceCodex(salesforcecodex.com)
subTitle2FieldName	Field API for options. This will be shown as additional field information like SalesforceCodex(salesforcecodex.com-Dhanik Lal Sahni)
queryCondition	Optional Filter criteria for query records. like Active__c=true or MailingAddressState=’CA’
selectedRecIds	Additional search criteria. This will be used to skip existing selected records.

Here is apex class code for searching records based on input criteria.

The class will return result in a list of SearchResult wrapper class.

record– It will return sObject so that we can retrieve the required fields in LWC. We are not hardcoding fields so we have to return sObject. We are not returning too many fields, only fields mentioned in the input criteria are returned. This will be also required as we can get the parent field in the option as well.

recordId– It is the record id.

recordName– Name field value. You can skip parameters.

we have used dynamic query to fire query in the database as we don’t know for which object this lookup will be used.

2. Creating Generic LWC for Multi-Select Lookup Component

Let us create now LWC for generic lookup. As it will be generic, we have to get all required object detail from the caller so that we can prepare a lookup for a given object. We will create the below public properties in LWC which can be used and passed information by the caller.

property	Property Description
labelName	It is label for lookup. Like Contact Address etc.
placeHolder	It is a place holder which will be shown in the search field.
titleFieldName	Primary field API which is required for lookup. Like Name
subTitleFieldName	Optional subtitle field to show in the list. It will display values like SalesforceCodex(salesforcecodex.com)
subTitle2FieldName	Optional Sub Title 2 field. It will display values like SalesforceCodex(salesforcecodex.com-Dhanik Lal Sahni)
objectApiName	Object API Name.
iconName	Icon name for the object. Refer SLDS icon for this.
lookupCondition	Optional Filter criteria for query records. like Active__c=true or MailingAddressState=’CA’
selectedRecordIds	It is an output detail that is updated when options are selected/deselected.
removedRecordIds	Removed option ids.
addedRecordIds	Newly added options ids.

Above properties will help us in creating a generic components. Important code block of this component are below

connectedCallback – On component load, it will show selected records as lightning-pill

setOptions – This will set option title. If subtitle is there then set title as title (subtitle). If subTitle and subTitle2 are there then set title as title (subTitle-subTitle2)

raiseEvent– On check box selection raise an event for the caller component with selected options

searchText– Search and display options based on input text criteria.

LWC Code

3. Test Component in Flow

We have completed the development of the generic lookup component. let us test this component in screen flow.

Add component Multi Selection Lookup (this is name of our generic component. You can change that in js-meta.xml file) on screen element and set properties for this component.

API Name – accountLookup

Add filter condition – Leave blank

Icon Name – standard:account

Label Name– Select Account

Object API Name– Account

Search Placeholder– Search Account

Selected Record Ids– Leave blank

Sub Title Field Api– PersonEmail

Sub Title2 Field Api– Leave blank

Title Field Api– Name

Test Lookup Image:

Yellow is our titleField and red is subTitle field.

4. Test Component in Another LWC

Let us add a generic lookup component in another LWC to test its functionality. For testing purpose, i have added one alert on checkbox selection. You can add funcationality based on your requirement.

Test Video:

References:

Pill

Dynamic SOQL

Related Posts:

Multi Select Lookup in Screen Flow