How to split values from multiple picklist to dropdown value in salesforce LWC | Split and display multiple picklist value into single dropdown value in LWC |
Create Lightning Web Component HTML
Step 1:- Create Lightning Web Component : splitMultipicklistLwc.html
SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.html
<template>
<lightning-card title="Split and display multiple picklist value in lwc ">
<table border="0" cellspacing="0" cellpadding="0" class="slds-table slds-table_bordered slds-table_col-bordered" style="border-collapse:collapse;">
<tr for:each={oppItemArr} for:item='recItem' key={rowId} for:index='index' >
<td>
<div class="slds-form-element_controller">
<select style="margin-top: 15px;" class="slds-select" data-id={indx} name="Dev_App__c" required>
<option value="--None--">--None--</option>
<template for:each={devAppOption} for:item="Itm">
<option key={Itm.Id} id={Itm.id} value={Itm}>{Itm}</option>
</template>
</select>
</div>
</td>
</tr>
</table>
</lightning-card>
</template>
Create Lightning Web Component JavaScript
Step 2:- Create Lightning Web Component : splitMultipicklistLwc.js
import { LightningElement, track,api, wire } from 'lwc';
import getOptRec from '@salesforce/apex/fetchRecordByIdLwcCtrl.getOptRec';
export default class SplitMultipicklistLwc extends LightningElement {
//Start ConnectedCallback
connectedCallback() {
}
//End ConnectedCallback
@api recordId;
@track oppItemArr=[];
@track devAppOption;
@wire(getOptRec,{recId:'$recordId'})
getInfos({error,data}){
if(error){
console.log('error == '+JSON.stringify(error));
}else if(data){
console.log('data == ', JSON.stringify(data));
this.oppItemArr = JSON.parse(JSON.stringify(data));
//Start split multipiclist
if(data.length >0 && data[0].Dev_App__c != undefined){
let devAppVal = data[0].Dev_App__c;
if(devAppVal !== null && devAppVal !== undefined && devAppVal !== ''){
devAppVal = devAppVal.split(";");
console.log('verticalOption2# ' + devAppVal);
this.devAppOption = devAppVal;
console.log('thisVrt ' + this.devAppOption);
}
}
//End split multipiclist
}
}
}
Step 3:- Create Apex Controller : fetchRecordByIdLwcCtrl.cls
SFDX:Create Apex Class >> New >> fetchRecordByIdLwcCtrl.cls
public with sharing class fetchRecordByIdLwcCtrl {
@AuraEnabled(cacheable=true)
public static List<Opportunity> getOptRec(Id recId){
List<Opportunity> optRecItem = [Select Id, Name, Dev_App__c From Opportunity Where Id=:recId];
return optRecItem;
}
}
Comments
Post a Comment