1

I'm building LWC component and I have custom metadata type that has picklist field with 70 values.

I need to display them as options in dual-list-box in LWC.

Is there any imports that I can use to read the values directly or should I use @wire to read the picklist values from apex and send back to JS the values to display and if so, how?

Thank you.

EDIT 1:

I used the first suggestion, created a apex method and called it with @wire.

            String elementValue;
            String elementLabel;
            List<String> sessionOptions = new List<String>();
            
            Schema.DescribeFieldResult objFieldDescribe = Piwik_Pro_Integration_Settings__mdt.Piwik_Pro_Fields_Session__c.getDescribe();
            List<Schema.PicklistEntry> lstPickListValues = objFieldDescribe.getPickListValues();
            
            for (Schema.PicklistEntry objPickList : lstPickListValues) {
                elementLabel = objPickList.getLabel();
                sessionOptions.add(elementLabel);
            }
            // system.debug(apiNamesList);
            return sessionOptions;

VS Code JS call:

@wire(getOptions, { dataType: 'dataType'})
dualListBoxOption;

VS dual list box:

<lightning-dual-listbox name="dimensions"
                        label="Select Dimensions"
                        source-label="Available"
                        selected-label="Selected"
                        field-level-help="Select your preferred dimensions:"
                        options={dualListBoxOption}
                        onchange={selectedDimensionsSet}>
</lightning-dual-listbox>

EDIT 2:

    import { LightningElement, track, wire, api} from 'lwc';
    import getPicklistValues from '@salesforce/apex/PiwikHttpCallout.getPicklistValues';

@wire(getPicklistValues,{dataType: '$dataType'})pickListValues({data,error}){
        if(data){
            this.showPickList = true;
            data.forEach(i => {
                this.options.push({label:i,value:i});
            });
            // console.log(this.options);
        }
    };

<lightning-dual-listbox 
        if:true={showPickList} 
        name="dimensions" 
        label="Select Dimensions" 
        source-label="Available"
        selected-label="Selected" 
        field-level-help="Select your preferred dimensions" 
        options={options}>
    </lightning-dual-listbox>

APEX:

@AuraEnabled(cacheable=true)
    public static List<String> getPicklistValues(String dataType){
        List<String> pickListValues  = new List<String>();
        if(dataType=='Sessions'){
            Schema.DescribeFieldResult pickList = Metadata__mdt.Metadata1__c.getDescribe();
            for( Schema.PicklistEntry pickVal : pickList.getPicklistValues()){
                pickListValues .add(pickVal.getLabel());
            }   
            return pickListValues;
        }
        else if(dataType=='Events'){
            Schema.DescribeFieldResult pickList = Metadata__mdt.Metadata__c.getDescribe();
            for( Schema.PicklistEntry pickVal : pickList.getPicklistValues()){
                pickListValues .add(pickVal.getLabel());
            }   
            return pickListValues;
        }
        else return null;
    }

Error

2 Answers 2

4

HTMl :

<template>
    <lightning-dual-listbox if:true={showPickList} name="dimensions" label="Select Dimensions" source-label="Available"
        selected-label="Selected" field-level-help="Select your preferred dimensions:" options={options}>
    </lightning-dual-listbox>
</template>

JS :

import { LightningElement,track, wire, api } from 'lwc';
import getPicklistValues from '@salesforce/apex/customApexClass.getPicklistValues';

export default class OpportunityLwc extends LightningElement {
    @track options = [];
    showPickList = false;
    @wire(getPicklistValues)pickListValues({data,error}){
        if(data){
            this.showPickList = true;
            data.forEach(i => {
                this.options.push({label:i,value:i});
            });
            console.log(this.options);
        }
    };
}

Apex :

public with sharing class customApexClass {
    @AuraEnabled(cacheable=true)
    public static List<String> getPicklistValues(){
        List<String> pickListValues = new List<String>();
        Schema.DescribeFieldResult pickList = metadata__mdt.Type__c.getDescribe();
        for( Schema.PicklistEntry pickVal : pickList.getPicklistValues()){
            pickListValues.add(pickVal.getValue());
        }   
        return pickListValues;
    }
}

enter image description here

7
  • Nice! It works. One more question if I may. How can I send String variable to the @wire js call?
    – Stojchesky
    Commented Oct 19, 2022 at 12:41
  • @wire(getPicklistValues,{dataType : '$variableName'})pickListValues({data,error}) If its work please mark this as best answer Commented Oct 19, 2022 at 13:04
  • I get - LWC1007: Leading decorators must be attached to a class declaration error. What might it be?
    – Stojchesky
    Commented Oct 19, 2022 at 14:00
  • can you show me your js code Commented Oct 19, 2022 at 14:04
  • I've edited my post - Edit 2. The error is on line: @wire(getPicklistValues,{dataType: '$dataType'})pickListValues({data,error}){
    – Stojchesky
    Commented Oct 19, 2022 at 14:16
2
  1. With Apex

you can use this apex script

Schema.DescribeFieldResult pickList = {MetaData_Api_Name}.{Picklist_Api_Name}.getDescribe();
for( Schema.PicklistEntry pickVal : pickList.getPicklistValues()){
    System.debug(pickVal.getLabel()+' '+ pickVal.getValue());
} 

return list of string or wrapper. get it from wire method in js.

  1. Without Apex

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

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: TYPE_FIELD }) statusValues;

NOTE : Import proper values in js Like

import OBJECT_NAME from '@salesforce/schema/Object__c'; import TYPE_FIELD from '@salesforce/schema/Object__c.Field__c';

2
  • I think 2 approach will not work because metadata not having recordtypeId. Commented Oct 19, 2022 at 9:34
  • I tried the first suggestion, but it doesn't work - still, the picklist values are not displayed as options in the dual list box? I've edited the post for detailed code of @wire call, apex method and dua list box code.
    – Stojchesky
    Commented Oct 19, 2022 at 10:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .