How to Create Reusable Dependent Picklist in LWC?

Hi Folks,

Today I came up with a new blog for the reusable dependent picklist. In this blog, you guys will see how to create a reusable generic picklist without using apex so let’s get started.

Before we start development, let’s talk about the use case & Solution.

Use Case: –

The company called XYZ is using many ( 100+ ) lightning web components and out of 20+ LWC are using dependent pick-list. As a developer, you have been asked to develop a generic ( reusable ) component which can work for any objects & for any component.

Solution: Create a web component which uses inbuilt JavaScript API to get the pick-list details and creates a generic dependent pick-list for any object. ( There are some limitations of the ui*API, check the supported object Here ).

Step 1 – Create a Lightning Web Component and name it GenericDependentPicklist

Step 2 – Test the Pick-list.

Create a web component and give it a name of your choice. For .html file use below code

<template>
    <div class="">
        <lightning-card  variant="Narrow"  
            title="Generic Solutions" icon-name="standard:record">
                <div class="slds-m-around_small" style="color: red;" >
                    Note:- Task Object is not supported by lightning/*Api 
                </div>
                <div class="slds-m-around_small">
                    Account Object
                    <c-generic-dependent-picklist 
                        object-api-name="Account"
                        dependent-picklist-api-name="CustomerPriority__c"
                        dependent-picklist-label="Customer Priority"
                        controlling-picklist-api-name="Industry"
                        controlling-picklist-label="Industry"
                        onselectedpicklists={handlePicklist} >
                    </c-generic-dependent-picklist>
                    <template if:true={selectedvalues}>
                        <div class="slds-m-around_small">
                            <p style="color: red;"> 
                                Selected Controlling Picklist : {selectedvalues.controlling}
                            </p>
                            <p style="color: red;"> 
                                Selected Dependent Picklist   : {selectedvalues.dependent} 
                            </p>
                        </div>
                    </template>
                </div>
        </lightning-card>
    </div>
</template>

Code Comments: – In our test component, we are using our generic component.

<c-generic-dependent-picklist 
                        object-api-name="Account"
                        dependent-picklist-api-name="CustomerPriority__c"
                        dependent-picklist-label="Customer Priority"
                        controlling-picklist-api-name="Industry"
                        controlling-picklist-label="Industry"
                        onselectedpicklists={handlePicklist} >
</c-generic-dependent-picklist>

object-api-name : – is used to get the Object API Name. So, make sure that you are passing the valid API name for the object.

dependent-picklist-api-name :- The API name for the dependent picklist field

dependent-picklist-label :- Field Label for the dependent pick-list field.

controlling-picklist-api-name :- API name for the controlling pick-list field

controlling-picklist-label : – Field Label for the Controlling pick-list field.

onselectedpicklists – Event handler which accepts the JS method in the calling component ( in our case it is test component ) to handle and get the selected values.

for .js file use below code between { }

selectedvalues;
    handlePicklist(event) {
        let selectedValues = event.detail.pickListValue;
        window.console.log('\n **** selectedValues **** \n ', selectedValues);
        this.selectedvalues = JSON.parse(JSON.stringify(selectedValues));
    }

for meta XML file using below code

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

Once you have created the test web component. Use this web component in either app page, record detail page or home page.

Approach

• In this solution, we have 5 @api decorators which are used to receive setup information such as object name, controlling picklist API name, and dependent picklist API names. 2 @api decorators are used to get the Label for Dependent & Controlling picklist field.
• We are using uiObjectInfoApi to get metadata info of objects such as picklist values.
• Methods like setUpControllingPicklist and setUpDependentPickList are used to set up picklist values each individually.
• In the setUpControllingPicklist method, we are filling all values available for Controlling Picklist Options whereas in the setUpDependentPicklist we are storing the picklist partial and required response which will be later used for filling dependent picklist options based on controlling picklist.
• One can handle events which are generated when the user selects options.

Future Enhancement

1. Add Validation
2. Ask to the user which type of Dependent Pick-list want to display either single-select or multi-select
3. Incorporate the changes for record type
4. Make the same component work for simple ( Non-Dependent ) pick-list

At Last I wanna thanks Amit for giving this platform to share with you guys, see you until next blog 🙂