Custom Multi-Select Picklist using LWC

Hello everyone,

In this blog we will see how to create a Generic Multi Select picklist which is better than standard Multi Select Picklist.

Lets create two Components here

1. passMultiSelectValues

2. multiPickListGenericComponent

Where passMultiSelectValues is Parent Component and multiPickListGenericComponent is Child Component.

PreRequisities :

1. Picklist field API Name

2. Picklist selected value to highlight the record.

3. Picklist Values.

Now create Child Component multiPickListGenericComponent and replace the HTML and JS replace the code given below respectively

HTML Code

<template>
  <div class="slds-box slds-col slds-scrollable" style="height: 7rem; padding: initial; background-color: white;">
    <ul role="menu" style="min-width: 100%; width: fit-content;">
      <template for:each={pickListValues} for:item="eachPickList" for:index="index">
        <div key={eachPickList}>
          <li onclick={handleSelection} data-value={eachPickList} data-selected={eachPickList} class="highlightRow">
            <div role="option">
              <span class="slds-media__figure" style="margin-right: 0.25rem;">
                <lightning-icon name="checkIcon" variant="inverse" icon-name="utility:check" size="xx-small"
                  class="addOrRemoveCheck slds-p-left_xx-small"></lightning-icon>
              </span>

              <span class="slds-media__body">
                <span class="slds-truncate" title={eachPickList}>{eachPickList}</span>
              </span>
            </div>
          </li>
        </div>
      </template>
    </ul>
  </div>
</template>

JS Code

import { LightningElement, api, track } from 'lwc';

export default class MultiPickListGenericComponent extends LightningElement {

    @api receivedPickListValues; //Picklist values sent by parent component
    @api selectedValues; //Values that has been selected
    @api fieldApiName; //API Name which makes component to be generic
    @track pickListValues = [];
    @track fieldName;

    selectedPickListValues = [];

    connectedCallback() {
        var i;
        let pickListValues = [];
        if (this.receivedPickListValues !== undefined) {
            this.receivedPickListValues.forEach(eachPicklistValue => {
                if(eachPicklistValue.hasOwnProperty('value')){
                    pickListValues.push(eachPicklistValue.value);
                    this.pickListValues = [...pickListValues];
                }
            });
        }
    }

    renderedCallback() {
        var i;
        if (this.receivedPickListValues !== null && this.receivedPickListValues !== undefined) {
            for (i = 0; i < this.receivedPickListValues.length; i++) {
                if(this.selectedValues !== undefined && this.selectedValues.includes(this.receivedPickListValues[i].value)) {
                    if (this.template.querySelectorAll('.highlightRow')[i].style !== undefined) {
                        this.template.querySelectorAll('.highlightRow')[i].style = 'background-color: rgba(9, 106, 189, 0.85); color : white;cursor: pointer;';
                        this.selectedPickListValues.push(this.receivedPickListValues[i].value);
                    }
                } else {
                    if (this.template.querySelectorAll('.highlightRow')[i].style !== undefined) {
                        this.template.querySelectorAll('.highlightRow')[i].style = 'background-color: white; cursor: pointer;';
                        this.template.querySelectorAll('.addOrRemoveCheck')[i].style = 'opacity :0;';
                    }
                }
            }
        }
    }

    handleSelection(event) {
        var item = event.currentTarget;
        var valueChoosen;
        var options;
        var i, j, k;
        let pickListValues = [];
        let selectedPickListValues1 = [];
        let found = false;
        if (item && item.dataset) {
            valueChoosen = item.dataset.value;
            pickListValues = this.selectedPickListValues;
            options = pickListValues;

            for (i = 0; i < options.length; i++) {
                if (options[i] === valueChoosen) {
                    found = true;
                    for (k = 0; k < this.receivedPickListValues.length; k++) {
                        if (this.receivedPickListValues[k].hasOwnProperty('value')) {
                            if (this.receivedPickListValues[k].value.indexOf(valueChoosen) > -1) {
                                this.template.querySelectorAll('.highlightRow')[k].style = 'background-color: white; cursor: pointer;';
                                this.template.querySelectorAll('.addOrRemoveCheck')[k].style = 'opacity :0;';
                            }
                        }
                    }
                    delete pickListValues[i];
                }
            }

            if (!found) {
                pickListValues.push(valueChoosen);
                for (i = 0; i < this.receivedPickListValues.length; i++) {
                    if (this.receivedPickListValues[i].hasOwnProperty('value')) {
                        if (this.receivedPickListValues[i].value.indexOf(valueChoosen) > -1) {
                            this.template.querySelectorAll('.highlightRow')[i].style = 'background-color: rgba(9, 106, 189, 0.85); color : white; cursor: pointer;';
                            this.template.querySelectorAll('.addOrRemoveCheck')[i].style = 'opacity :1;';
                        }
                    }
                }
            }
        }
        this.selectedPickListValues = pickListValues;
        
        const picklistEvent = new CustomEvent("multipicklistgenericevent", {
            detail: {fieldName: this.fieldApiName, value : this.selectedPickListValues}

        });

        this.dispatchEvent(picklistEvent);
    }

}

Now create a parent component and pass the values that are required to child component passMultiSelectValues

Now replace the code of passMultiSelectValues HTML and JS with the code given below

HTML code

<template>
    <template if:true={pickListValues}>
        <c-multi-pick-list-generic-component received-pick-list-values={pickListValues}
            onmultipicklistgenericevent={multipicklistgenericevent}
            selected-values={fieldValue} field-api-name="Company_Category__c">
        </c-multi-pick-list-generic-component>
    </template>
    <p> Selected Values:  {fieldValue}</p>
</template>

JS Code

import { LightningElement } from 'lwc';

export default class PassMultiSelectValues extends LightningElement {
    fieldValue = 'eCommerce,Retailer,Investor';

    get pickListValues(){
        return[
            {label: 'eCommerce', value: 'eCommerce'},
            {label: 'Health Care', value: 'Health Care'},
            {label: 'Education', value: 'Education'},
            {label: 'Retailer', value: 'Retailer'},
            {label: 'Manufacturer', value: 'Manufacturer'},
            {label: 'Food Service', value: 'Food Service'},
            {label: 'Investor', value: 'Investor'},
        ]
    }

    multipicklistgenericevent(event){
        this.fieldValue = event.detail.value;
    }
}