+ Start a Discussion
sumit dsumit d 

How to convert single select picklist to multiselect piclist in LWC

Hi All,
        I have a LWC in which i have picklist fields. I want to change the Picklist to Multiselect Picklist as the field is multiselect picklist on the activity object. How to change the picklist to multiselect picklist in LWC?
My Component is as below:- 
<template>
    <lightning-card if:true={record} title={record.name} icon-name="standard:account">
        <lightning-spinner if:true={showSpinner} variant="brand" alternative-text="Loading..."></lightning-spinner>
        <div class="slds-m-horizontal_medium">
            <!-- Account Details -->
            <div if:true={isAccount} class="slds-grid slds-wrap slds-border_bottom slds-p-bottom_small">
                <div class="slds-col slds-size_1-of-1">
                    <lightning-icon icon-name="standard:location" size="x-small"></lightning-icon>
                    <span class="slds-p-left_small">{record.account.BillingStreet}, {record.account.BillingCity}, {record.account.BillingState}</span>
                </div>
                <div class="slds-col slds-size_1-of-1">
                    <lightning-icon icon-name="standard:call" size="x-small"></lightning-icon>
                    <span class="slds-p-left_small">{record.account.Phone}</span>
                </div>
            </div>
            <!-- Physician Details -->
            <div if:true={isPhysician} class="slds-grid slds-wrap slds-border_bottom slds-p-bottom_small">
                <div class="slds-col slds-size_1-of-1">
                    <lightning-icon icon-name="standard:location" size="x-small"></lightning-icon>
                    <span class="slds-p-left_small">{record.contact.Account.BillingStreet}, {record.contact.Account.BillingCity}, {record.contact.Account.BillingState}</span>
                </div>
                <div class="slds-col slds-size_1-of-1">
                    <lightning-icon icon-name="standard:call" size="x-small"></lightning-icon>
                    <span class="slds-p-left_small">{record.contact.Phone}</span>
                </div>
            </div>
            <!-- Call Details -->
            <div class="slds-grid slds-wrap slds-gutters_small">
                <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-2">
                    <lightning-input label="Date of Visit" value={newTask.Date_of_Visit__c} type="date" date-style="short" onchange={valueChanged}></lightning-input>
                </div>
                <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-2">
                    <lightning-combobox label="Clinical Question Selection" options={clinicalDecisionOptions} value={newTask.Clinical_Decision__c} onchange={valueChanged}></lightning-combobox>
                </div>
                <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-2">
                    <lightning-combobox label="Event" options={eventOptions} value={newTask.Event__c} onchange={valueChanged}></lightning-combobox>
                </div>
                <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-2">
                    <lightning-combobox label="Competition" options={competitionOptions} value={newTask.Competition__c} onchange={valueChanged}></lightning-combobox>
                </div>
                <div if:true={isAccount} class="slds-col slds-size_1-of-1 slds-p-top_small">
                    Physicians:
               
                    <ui class="list-group">
                        <template for:each={contactList} for:item="c">
                            <li key={c.value} onclick={updateContactSelection} data-value={c.value} class={c.class}>
                                {c.label}
                            </li>
                        </template>
                    </ui>
                </div>
                <div if:true={newTask.Clinical_Decision__c} class="slds-col slds-size_1-of-1 slds-p-top_small">
                    Meeting Notes:
                   
                    <ui class="list-group">
                        <template for:each={notesOptions} for:item="opt">
                            <li key={opt.label} onclick={updateNote} data-value={opt.label} class={opt.class}>
                                {opt.label}
                            </li>
                        </template>
                    </ui>
                </div>
            </div>            
        </div>
        <div class="slds-align_absolute-center slds-p-top_small">
            <lightning-button variant="brand" label="Save" onclick={saveCall}></lightning-button>
        </div>
    </lightning-card>
</template>
Controller is as below:- 
import { LightningElement, api, track, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { fireEvent } from 'c/pubsub';
// import getAccount from '@salesforce/apex/CustomerIntelligenceController.getAccount';
import getRecord from '@salesforce/apex/CustomerIntelligenceController.getRecord';
import saveCallDetails from '@salesforce/apex/CustomerIntelligenceController.saveCallDetails';
export default class LogCall extends LightningElement
{
    @api recordId;
    @api formFactor;
    @track isLoaded = false;
    @track showSpinner = true;
    @track record;
    @track contactList = [];
    @track newTask = {};
    @wire(CurrentPageReference) pageRef;
    renderedCallback()
    {
        if(this.isLoaded)
        {
            return;
        }
        this.isLoaded = true;
        getRecord({recordId: this.recordId})
        .then(result => {
            console.log(result);
            this.record = result;
            if(this.isAccount)
            {
                this.newTask.WhatId = this.recordId;
                this.newTask.Contacts = [];
                for(let i = 0; i < this.record.contacts.length; i++)
                {
                    this.contactList.push({label: this.record.contacts[i].Name, value: this.record.contacts[i].Id, class: 'list-group-item'});
                }
            }
            else // physician
            {
                this.newTask.WhoId = this.recordId;
            }
            if(this.record.mostRecentCall)
            {
                this.newTask.Competition__c = this.record.mostRecentCall.Competition__c;
            }
            if(this.formFactor === 'PHONE') //mobile date fields need a different default setting than desktop (because salesforce is ridiculous)
            {
                this.newTask.Date_of_Visit__c = new Date().toISOString();
            }
            else
            {
                let date = new Date();
                let dateString = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                this.newTask.Date_of_Visit__c = dateString; //default date of visit to today
            }
            this.showSpinner = false;
        })
        .catch(error => {
            console.log(error);
            this.showSpinner = false;
        });
    }
    get isAccount()
    {
        return this.record.account;
    }
    get isPhysician()
    {
        return this.record.contact;
    }
    get clinicalDecisionOptions()
    {
        return [
            {label: 'Active Surveillance', value: 'Active Surveillance'},
            {label: 'Definitive Therapy-RT', value: 'Definitive Therapy-RT'},
            {label: 'Surgery/Treatment Planning', value: 'Surgery/Treatment Planning'},
            {label: 'Post RP-RT Timing', value: 'Post RP-RT Timing'},
            {label: 'BCR', value: 'BCR'}
        ];
    }
    get eventOptions()
    {
        return [
            {label: 'Drop In', value: 'Drop In'},
            {label: 'Text', value: 'Text'},
            {label: 'Email', value: 'Email'},
            {label: 'Phone Call', value: 'Phone Call'},
            {label: 'Coffee/Snack', value: 'Coffee/Snack'},
            {label: 'Breakfast', value: 'Breakfast'},
            {label: 'Virtual Breakfast', value: 'Virtual Breakfast'},
            {label: 'Lunch', value: 'Lunch'},
            {label:'Virtual Lunch', value:'Virtual Lunch'},
            {label: 'Dinner', value: 'Dinner'},
            {label: 'Virtual Dinner', value: 'Virtual Dinner'}
        ]
    }
    get competitionOptions()
    {
        return [
            {label: 'Oncotype', value: 'Oncotype'},
            {label: 'Prolaris', value: 'Prolaris'},
            {label: 'Nomogram', value: 'Nomogram'},
            {label: 'Clinical Feature', value: 'Clinical Feature'},
        ]
    }
    get notesOptions()
    {
        var options = [];
        switch(this.newTask.Clinical_Decision__c)
        {
            case 'Active Surveillance':
                options = [
                    {label: 'Physician is focused on competition. Continue competitive messaging.', class: 'list-group-item'},
                    {label: 'Physician sees no value with genomic testing with Active Surveillance. Focus on other clinical decisions.', class: 'list-group-item'},
                    {label: 'Not utilizing genomics in this patient type yet. May require additional meetings. Continue with Active Surveillance focus.', class: 'list-group-item'},
                    {label: 'Genomic fatigue. Previous use of genomics didn\'t change treatment decision.', class: 'list-group-item'},
                    {label: 'Utilizes Decipher test for this patient type. Follow up to capture all patients and discuss other opportunities.',  class: 'list-group-item'}
                ];
                break;
            case 'Definitive Therapy-RT':
                options = [
                    {label: 'Physician sees value in de-intensifying therapy-shortening hormones based on Decipher result.', class: 'list-group-item'},
                    {label: 'Physician sees value in intensifying therapy-including/extending hormones based on Decipher result.', class: 'list-group-item'},
                    {label: 'Rad Onc/Med Onc states that the referring urologist initiates hormone decision, but might intensify/de-intensify hormones based on Decipher result.', class: 'list-group-item'},
                    {label: 'Physician supports Decipher but would like the test result before radiation therapy appointment.', class: 'list-group-item'},
                    {label: 'Physician sees no value in utilizing Decipher for hormone decisions.',  class: 'list-group-item'}
                ];
                break;
            case 'Surgery/Treatment Planning':
                options = [
                    {label: 'RP surgeon sees value with pre-surgery treatment conversation. eg. High risk Decipher patients need surgery first so RT is still an option.', class: 'list-group-item'},
                    {label: 'RP surgeon sees no value for surgery/treatment planning and would only utilize testing for AS patients or Post RP-radiation timing.', class: 'list-group-item'},
                    {label: 'RP surgeon sees value for surgical planning based on Decipher result.', class: 'list-group-item'},
                    {label: 'Physician is utilizing testing for focal therapy versus radiation or RP treatment decisions.', class: 'list-group-item'},
                    {label: 'Physician utilizes the test result to support decision for patient to come off of Active Surveillance.',  class: 'list-group-item'}
                ];
                break;
            case 'Post RP-RT Timing':
                options = [
                    {label: 'Physician believes in early radiation and uses Decipher in clinically high risk patients.', class: 'list-group-item'},
                    {label: 'Physician believes in Decipher Post-Op test but ordering logistics is main obstacle.', class: 'list-group-item'},
                    {label: 'Physician does not believe in early radiation so move to BCR/other clinical decision.', class: 'list-group-item'},
                    {label: 'Physician utilizes ultra-sensitive PSA. Focus on Decipher message to help confirm usPSA rise.', class: 'list-group-item'},
                    {label: 'Physician orders Decipher for radiation timing. Discuss other clinical decisions.', class: 'list-group-item'}
                ];
                break;
            case 'BCR':
                options = [
                    {label: 'Physician sees no value for Decipher test. Will treat with RT + ADT.', class: 'list-group-item'},
                    {label: 'Physician sees value with ordering Decipher to help with the addition of hormone therapy.', class: 'list-group-item'},
                    {label: 'Physician gave buy-in for ordering. Needs support with logistics to identify appropriate patient for testing.', class: 'list-group-item'},
                    {label: 'Physician sees value of GRID with disease progression.', class: 'list-group-item'}
                ];
                break;
            default:
                options = [];
        }  
        for(let i = 0; i < options.length; i++)
        {
            if(options[i].label === this.newTask.Notes__c)
            {
                options[i].class = options[i].class + ' selected';
            }
        }
        return options;
    }
    valueChanged(event)
    {
        var newValue = event.target.value;
        switch(event.target.label)
        {
            case 'Date of Visit':
                this.newTask.Date_of_Visit__c = newValue;
                break;
            case 'Clinical Decision':
                this.newTask.Clinical_Decision__c = newValue;
                break;
            case 'Event':
                this.newTask.Event__c = newValue;
                break;
            case 'Competition':
                this.newTask.Competition__c = newValue;
                break;
            default:
        }
    }
    updateNote(event)
    {
        this.newTask.Notes__c = event.target.dataset.value;
    }
    updateContactSelection(event)
    {
        var selectedContact = event.target.dataset.value;
        if(this.newTask.Contacts.indexOf(selectedContact) !== -1)
        {
            let updatedSelection = [];
            for(let i = 0; i < this.newTask.Contacts.length; i++)
            {
                if(this.newTask.Contacts[i] !== selectedContact)
                {
                    updatedSelection.push(this.newTask.Contacts[i]);
                }
            }
            this.newTask.Contacts = updatedSelection;
            for(let i = 0; i < this.contactList.length; i++)
            {
                if(this.contactList[i].value === selectedContact)
                {
                    this.contactList[i].class = 'list-group-item';
                }
            }
        }
        else
        {
            this.newTask.Contacts.push(selectedContact);
            for(let i = 0; i < this.contactList.length; i++)
            {
                if(this.contactList[i].value === selectedContact)
                {
                    this.contactList[i].class = this.contactList[i].class + ' selected';
                }
            }
        }
    }
    saveCall()
    {
        this.showSpinner = false;
        saveCallDetails({callObject: this.newTask})
        .then(result => {
            console.log(result);
            this.showSpinner = false;
            fireEvent(this.pageRef, 'decipher__callLogged');
            const taskSavedEvent = new CustomEvent('success');
            this.dispatchEvent(taskSavedEvent);
        })
        .catch(error => {
            console.log(error);
            this.showSpinner = false;
        })
    }
}
Stevie WillStevie Will
After opening the email folder, click the “From” column tab to arrange and display emails grouped by sender. In Outlook and Windows Live Mail, click and highlight the first email message that you want to delete, and  then press and hold the “Shift” key and “Down” arrow key to select the multiple messages Myherbalife (https://www.myherbalife.life/)