How to create a multi-select picklist using lwc

Hello #OhanaMembers,

I was working on a requirement where I had a requirement to implement the custom Multiselect combo box so that end users can select multiple options from the picklist.

We are not using the standard multi-select component as the length of the values is too big and the business users can not hover to each option to see which option they wanted to select.

So, As a Salesforce Architect, I have asked my team to built a reusable component and I am posting the same component here so that if anyone have such requirement in future can be get benefitted.

So, let’s start building the component. create a custom Lightning web component and use below code for JavaScript and HTML file.

How to use

component receives the following params:

label – String with label name;        
disabled – Boolean value, enable or disable Input;       
options – Array of objects [{label:’option label’, value: ‘option value’},{…},…];

to clear the value call clear() function from parent:
        let multiSelectPicklist = this.template.querySelector('c-multi-select-pick-list');
        if (multiSelectPicklist) {
            multiSelectPicklist.clear();
        }

to get the value to receive “valuechange” event in the parent;        
the returned value is the array of strings – values of selected options;
an example of usage:

<c-multi-select-pick-list options={marketAccessOptions}
                                onvaluechange={handleValueChange}
                                label="Account Industry">
        </c-multi-select-pick-list>

        handleValueChange(event){
            console.log(JSON.stringify(event.detail));
        }

To see the demo, let’s create a new component that will use LDS to get the Account Industry and then pass those as an option to our component.

Demo

<!--
    @description       : 
    @author            : Amit Singh
    @group             : 
    @last modified on  : 02-02-2021
    @last modified by  : Amit Singh
    Modifications Log 
    Ver   Date         Author       Modification
    1.0   02-02-2021   Amit Singh   Initial Version
-->
<template>
    <lightning-card variant="Narrow" title="Mulit Select ComboBox" icon-name="custom:custom43">
        <div class="slds-p-horizontal_small">
            <c-multi-select-pick-list 
                if:true={picklistValues} 
                options={picklistValues}
                onvaluechange={handleValueChange} 
                label="Industry">
            </c-multi-select-pick-list>
        </div>
    </lightning-card>
</template>

/**
 * @description       : 
 * @author            : Amit Singh
 * @group             : 
 * @last modified on  : 02-02-2021
 * @last modified by  : Amit Singh
 * Modifications Log 
 * Ver   Date         Author       Modification
 * 1.0   02-02-2021   Amit Singh   Initial Version
**/
import { LightningElement, wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class LdsPicklist extends LightningElement {

    picklistValues;
    error;
    @wire(getPicklistValues, { 
        recordTypeId: '012000000000000AAA', fieldApiName: INDUSTRY_FIELD 
    })
    wiredPicklist({ error, data }){
        
        if(data){
            this.picklistValues = data.values;
            console.log(' data ', data.values);
            this.error = undefined;
        }
        if(error){
            this.picklistValues = undefined;
            this.error = error;
        }
    }

    handleValueChange(event){
        console.log(JSON.stringify(event.detail));
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <!--<target>lightning__Tab</target>-->
        <!--<target>lightning__Inbox</target>-->
        <!--<target>lightning__UtilityBar</target>-->
        <!--<target>lightning__FlowScreen</target>-->
        <!--<target>lightningSnapin__ChatMessage</target>-->
        <!--<target>lightningSnapin__Minimized</target>-->
        <!--<target>lightningSnapin__PreChat</target>-->
        <!--<target>lightningSnapin__ChatHeader</target>-->
        <!--<target>lightningCommunity__Page</target>-->
        <!--<target>lightningCommunity__Default</target>-->
    </targets>
</LightningComponentBundle>

Happy Learning 🙂

Please do, like, share and subscribe to receive more updates.

#DeveloperGeeks #AskPanther #SfdcPanther