Multi-select Picklist in LWC using lightning-dual-listbox

In this post, we will implement the functionality to use a multi-select picklist in LWC (Lightning Web Component) using lightning-dual-listbox. As part of this demonstration, I have created Language__c multi-select picklist on the Account object. We will use this multi-select picklist in LWC using lightning-dual-listbox.

Let’s hop into the implementation.

Implementation

To use a multi-select picklist in LWC, we need to use the standard lightning web component lightning-dual-listbox.

First, create Lightning Web Component and import the getPicklistValues and getObjectInfo from lightning/uiObjectInfoApi module. We are importing getObjectInfo to get the Record Type details. Because we need to pass the Record Type Id to get the picklist values. It can be blank as well in case the Record Type is not available on the object. Then, we need to import the Object for the particular picklist which is Account in our case. We also need to import the picklist field.

import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account'; 
import LANGUAGE_FIELD from '@salesforce/schema/Account.Language__c';

Then, use the wire property to get the Account object information using getObjectInfo adapter:

// Get Object Info.
@wire (getObjectInfo, {objectApiName: ACCOUNT_OBJECT})
accountObjectInfo;

Also Read:

Wire Service in LWC with Example

Then, we have to use the wire property again to get the picklist values using the getPicklistValues adapter. We have to pass recordTypeId and fieldApiName. Here, we will pass the default Record Type Id.

Track property lstOptions will be used to store the picklist values. It is an array of objects which should have a label and value properties. Hence we need to loop through the picklist values that we get using wire property and then add them to the lstOptions.

// Get Picklist values.
    @wire(getPicklistValues, {recordTypeId: '$accountObjectInfo.data.defaultRecordTypeId', fieldApiName: LANGUAGE_FIELD })
    languages(data, error){
        if(data && data.data && data.data.values){
            data.data.values.forEach( objPicklist => {
                this.lstOptions.push({
                    label: objPicklist.label,
                    value: objPicklist.value
                });
            });
        } else if(error){
            console.log(error);
        }
    };

And finally, use the handleChange method to store the selected values in the lstSelected property.

This is how our JavaScript file would look like:

multiSelectPicklist.js

import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account'; 
import LANGUAGE_FIELD from '@salesforce/schema/Account.Language__c';

export default class MultiSelectPicklist extends LightningElement {
    lstSelected = [];
    @track lstOptions = [];

    // Get Object Info.
    @wire (getObjectInfo, {objectApiName: ACCOUNT_OBJECT})
    accountObjectInfo;

    // Get Picklist values.
    @wire(getPicklistValues, {recordTypeId: '$accountObjectInfo.data.defaultRecordTypeId', fieldApiName: LANGUAGE_FIELD })
    languages(data, error){
        if(data && data.data && data.data.values){
            data.data.values.forEach( objPicklist => {
                this.lstOptions.push({
                    label: objPicklist.label,
                    value: objPicklist.value
                });
            });
        } else if(error){
            console.log(error);
        }
    };

    handleChange(event) {
        this.lstSelected = event.detail.value;
    }
}

lightning-dual-listbox in LWC

Finally, add the lightning-dual-listbox component and add the below attributes to it:

name: text to refer this component
label: label to display for this multi-select picklist
source-label: label to display for available values
selected-label: label to display for selected values
field-level-help: to set up the help text
options: list of picklist values
onchange: on change handler which will we executed when value is changed

And loop through the lstSelected property to display the Selected Values on the component.

Also Read:

Loop through List in LWC and Javascript

This is how our HTML file would look like:

multiSelectPicklist.html

<template>
    <lightning-card title="Multi-select Picklist using lightning-dual-listbox">
        <div class="slds-p-around_small">
            <lightning-dual-listbox name="languages"
                                    label="Select Languages"
                                    source-label="Available"
                                    selected-label="Selected"
                                    field-level-help="Select your preferred languages"
                                    options={lstOptions}
                                    onchange={handleChange}></lightning-dual-listbox>
                                    <br/>
            <template if:true={lstSelected}>
                <strong>You Selected: </strong>
                <template for:each={lstSelected} for:item="sel">
                    <p key={sel}>{sel}</p>
                </template>
            </template>
        </div>
    </lightning-card>
</template>