Apex Code Development You need to sign in to do that
Don't have an account?
Cooper 13 Create dynamic multipicklist dropdown through LWC. So that You do not hard code the values.
Hi All
I have tried to create multiselect picklist dropdown through LWC but here values are hardcoded. You can see my Code Below:
Demo.html
<template>
<!-- picklistlabel sets the label to multi select combobox -->
<c-mutli-select-picklist picklistlabel="Industry" values={values} ></c-mutli-select-picklist>
</template>
demo.js
import { LightningElement, track, api } from 'lwc';
export default class Demo extends LightningElement {
//This array can be anything as per values
values = [{label : 'Agriculture', value : 'Agriculture', selected : false},
{label : 'Banking', value : 'Banking', selected : false},
{label : 'Chemicals', value : 'Chemicals'},
{label : 'Education', value : 'Education'},
{label : 'Finance', value : 'Finance'}];
//To get the picklist values in container component
fetchSelectedValues(){
let selections = this.template.querySelector('c-mutli-select-picklist');
console.log(selections.values);
}
}
Demo.js meta
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Requirement:
Object: Account and Field: Industry
I want that through apex class all the picklist value of industry would be visible in dropdown instead of hardcoded value.
Can anybody help me to make it dynamic.
Thanks in Advance
try with below link have solution for similar kind of ask.
https://dineshyadav.com/dynamic-multi-select-picklist-in-lwc/
If this helps, Please mark it as best answer.
Thanks!!
Please find dynmic Multiselect dropdown in lwc. you don't need to call apex class for getting picklist values. you can find values in lwc itself.
<template> <lightning-dual-listbox name="languages" label="Select Languages" source-label="Available" selected-label="Selected" field-level-help="Select your preferred languages" options={options} onchange={handleChange}></lightning-dual-listbox> <div class="slds-box" > <p>Selected values are: {selected}</p> </div> </template> ==================================================== import { LightningElement,wire } from 'lwc'; import { getPicklistValues } from 'lightning/uiObjectInfoApi'; import Account_Industry from '@salesforce/schema/Account.Industry'; import { getObjectInfo } from 'lightning/uiObjectInfoApi'; import ACCOUNT_OBJECT from '@salesforce/schema/Account'; export default class DynmicMultiselectPicklist extends LightningElement { selected = []; options = []; @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT }) accountInfo; @wire(getPicklistValues, { recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: Account_Industry } ) AccountIndustryValues({data,error}){ if(data){ this.options = data.values; } else if(error){ console.log('error====> ' + JSON.stringify(error)); } }; handleChange(event){ this.selected = event.detail.value; } } ================================================== <?xml version="1.0"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>54.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>you just need to copy & paste above code and find your answer.
don't forget to mark it as the best answer.
Thank you
The solution you have send is for double list and my requirement is for single list as shown in Image below:
If anybody knows how to do this. Please help me. Thanks