Dependent Lookup N-Level in LWC

Dependent Lookups are useful in Salesforce. We are going to build a N-Level dependent lookup component in LWC. To do so, We will use reusable search lookup . Some of the key features will be:-

1. We can do filtered search on any object by just passing parent record id and parent field api name to convert reusable lookup into dependent search lookup
2. You can use our dependent lookup to provide users an option to select records based on parent selection. For Example, Users can first select Account, then Contact and then its related cases

Business Use Case – Dependent Lookup

Business asked you to create a component so that case agent can search cases by account and then filtering contact based on account. Later, they want to see the cases related to selected contact.

Code – N-Level Dependent Lookup Using Reusable Lookup

First create the reusable Lookup component in your org using code from here:- Generic Lookup Component By Salesforce Diaries

Now, Create another Lightning Web Component with name dependentLookup and copy below code.

dependentLookup.html

c-reusable-lookup has been called three times. One for Account, One for Contact and another one for Cases.It looks like as below:-

Reusable lookup and n-level dependent lookup search lwc component

<template>
    <lightning-card title="N-Level Dependent Lookup Search Component" icon-name="custom:custom57">
        <div class="slds-p-around_small slds-box">
            <c-reusable-lookup onvalueselected={handleValueSelectedOnAccount}></c-reusable-lookup>
            <c-reusable-lookup if:true={parentAccountSelectedRecord} label="Select Contact"
                selected-icon-name="standard:contact" object-label="Contact" object-api-name="Contact"
                field-api-name="Name" other-field-api-name="Email" parent-record-id={parentAccountSelectedRecord.id}
                parent-field-api-name="AccountId" onvalueselected={handleValueSelectedOnContact}></c-reusable-lookup>
            <c-reusable-lookup if:true={parentContactSelectedRecord} label="Select Case"
                selected-icon-name="standard:case" object-label="Case" object-api-name="Case" field-api-name="Subject"
                other-field-api-name="Origin" parent-record-id={parentContactSelectedRecord.id}
                parent-field-api-name="ContactId" onvalueselected={handleValueSelectedOnContact}></c-reusable-lookup>
        </div>
    </lightning-card>
</template>

dependentLookup.js

We have two onselect hanlders for getting information about selected record. Later on, the selected record id are passed to lookup to so that it display results based on that.

import { LightningElement } from 'lwc';

export default class DependentLookup extends LightningElement {
    parentAccountSelectedRecord;
    parentContactSelectedRecord;

    handleValueSelectedOnAccount(event) {
        this.parentAccountSelectedRecord = event.detail;
    }

    handleValueSelectedOnContact(event) {
        this.parentContactSelectedRecord = event.detail;
    }
}

dependentLookup.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Demo- N-Level Dependent Lookup Search Component

Our search lookup component has been placed on App Page.

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH