Import Multiple Picklist Fields in Salesforce Lightning Web Component

HomeInfallibleTechie Admin

Import Multiple Picklist Fields in Salesforce Lightning Web Component

InfallibleTechie Admin

Sample Code:

HTML:

<template>
    <lightning-card>
        <div style="width:200px; padding:0.5rem;">
            <lightning-combobox
                label="Industry"
                value={selectedIndustryValue}
                options={optionsIndustry}
                onchange={handleIndustryChange}
                placeholder="Select Industry">
            </lightning-combobox>
        </div>
        <div style="width:200px; padding:0.5rem;">
            <lightning-combobox
                label="Account Source"
                value={selectedAccountSourceValue}
                options={optionsAccountSource}
                onchange={handleAccountSourceChange}
                placeholder="Select Account Source">
            </lightning-combobox>
        </div>
    </lightning-card>
</template>

JavaScript:

import { LightningElement, wire } from 'lwc';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import ACCOUNT_SOURCE_FIELD from '@salesforce/schema/Account.AccountSource';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class SampleLWC extends LightningElement {

    optionsIndustry = [];
    optionsAccountSource = [];
    selectedIndustryValue;
    selectedAccountSourceValue;

    @wire( getObjectInfo, { objectApiName: ACCOUNT_OBJECT } )
    objectInfo;

    @wire( getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD } )
    wiredIndustryData( { error, data } ) {

        console.log( 'Inside Industry Get Picklist Values' );

        if ( data ) {
                            
            console.log( 'Data received from Industry Picklist Field ' + JSON.stringify( data.values ) );
            this.optionsIndustry = data.values;
            console.log( 'optionsIndustry are ' + JSON.stringify( this.optionsIndustry ) );

        } else if ( error ) {

            console.error( 'Error in Industry picklist field', JSON.stringify( error ) );

        }

    }

    @wire( getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: ACCOUNT_SOURCE_FIELD } )
    wiredAccountSourceData( { error, data } ) {

        console.log( 'Inside Account Source Get Picklist Values' );

        if ( data ) {
                            
            console.log( 'Data received from Account Source Picklist Field ' + JSON.stringify( data.values ) );
            this.optionsAccountSource = data.values;
            console.log( 'optionsAccountSource are ' + JSON.stringify( this.optionsAccountSource ) );

        } else if ( error ) {

            console.error( JSON.stringify( error ) );

        }

    }

    handleIndustryChange( event ) {
        
        console.log( 'New Industry Value selected is ' + JSON.stringify( event.detail.value ) );   

    }

    handleAccountSourceChange( event ) {
        
        console.log( 'New Account Source Value selected is ' + JSON.stringify( event.detail.value ) );   

    }

}

JS-meta.xml:

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

Output:

Leave a Reply