Hey guys, today in this post we are going to learn about How to split values from multiple picklist to dropdown value in salesforce LWC.
A Picklist provides a user with an select-only component that is functionally similar to an HTML `select` element. It is accompanied with a listbox of pre-defined options. A picklist has both single and multi-selection patterns. To know more details about Picklist, Click Here.
Final Output
You can download file directly from github by Click Here.
Other related post that would you like to learn in Salesforce
- Find the below steps βΎ
Create Lightning Web Component HTML
Step 1:- Create Lightning Web Component : splitMultipicklistLwc.html
SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.html
splitMultipicklistLwc.html [Lightning Web Component 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
SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.js
splitMultipicklistLwc.js [LWC JavaScript File]
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
}
}
}
Create Lightning Web Component Meta XML
Step 3:- Create Lightning Web Component : splitMultipicklistLwc.js-meta.xml
SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.js-meta.xml
splitMultipicklistLwc.js-meta.xml [LWC Meta Data XML]
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Step 4:- Create Apex Controller : fetchRecordByIdLwcCtrl.cls
SFDX:Create Apex Class >> New >> fetchRecordByIdLwcCtrl.cls
fetchRecordByIdLwcCtrl.cls [Apex Class]
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;
}
}
Further post that would you like to learn in Salesforce
How to split a variable value in JavaScript?
The split() method splits a string into an array of substrings. The split() method returns the new array. The split() method does not change the original string. If ('') is used as separator, the string is split between words.
What is split () in JavaScript?
The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.
How does split () work?
The split() function works by scanning the given string or line based on the separator passed as the parameter to the split() function. In case the separator is not passed as a parameter to the split() function, the white spaces in the given string or line are considered as the separator by the split() function.
Related Topics | You May Also Like
Our Free Courses β
π Get Free Course β
![]() π Salesforce Administrators π Salesforce Lightning Flow Builder π Salesforce Record Trigger Flow Builder |
π Get Free Course β
![]() π Aura Lightning Framework π Lightning Web Component (LWC) π Rest APIs Integration |