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 | How to Split a String into an Array in LWC JS | Split string with picklist value in lwc JS Salesforce

620 views

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

Split and display multiple picklist value in lwc -- w3web.net

 

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]

  1.   <template>
  2.  
  3.     <lightning-card title="Split and display multiple picklist value in lwc ">
  4.  
  5.         <table border="0" cellspacing="0" cellpadding="0" class="slds-table slds-table_bordered slds-table_col-bordered" style="border-collapse:collapse;">
  6.             <tr for:each={oppItemArr} for:item='recItem' key={rowId} for:index='index' >               
  7.                 <td>
  8.                     <div class="slds-form-element_controller">
  9.                         <select style="margin-top: 15px;" class="slds-select" data-id={indx} name="Dev_App__c"  required> 
  10.                             <option  value="--None--">--None--</option>  
  11.                                 <template for:each={devAppOption} for:item="Itm">
  12.                                  <option key={Itm.Id} id={Itm.id} value={Itm}>{Itm}</option> 
  13.                             </template> 
  14.                       </select>
  15.                     </div>
  16.                 </td>
  17.  
  18.              </tr>
  19.         </table>   
  20.     </lightning-card>
  21.  
  22.  
  23. </template>

 

Create Lightning Web Component JavaScript

Step 2:- Create Lightning Web Component : splitMultipicklistLwc.js

 
βœͺ The Big Announcement: -
As per student's demands, I re-opened my eBook of "Salesforce Tutorial" Limited-time huge discount offer Absolutely 50% Off.
I am thinking to give you discount offer occasion of Gandhi Jayanti for a powerful "Salesforce admin course" where you can Understand from Basic Concepts to advanced label in Salesforce.
πŸ‘‰ So Don't MISS it... (Access Right Now)
πŸ‘‰ Get Huge Discount Offer 50%: - Get eBook
 

SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.js

splitMultipicklistLwc.js [LWC JavaScript File]

  1.    import { LightningElement, track,api, wire } from 'lwc';
  2. import getOptRec from '@salesforce/apex/fetchRecordByIdLwcCtrl.getOptRec';
  3. export default class SplitMultipicklistLwc extends LightningElement {
  4.  
  5.     //Start ConnectedCallback
  6.  
  7.     connectedCallback() {
  8.  
  9.     }
  10.  
  11.    //End ConnectedCallback
  12.  
  13. @api recordId; 
  14.     @track oppItemArr=[];
  15.     @track devAppOption;
  16.  
  17.  
  18.     @wire(getOptRec,{recId:'$recordId'})
  19.     getInfos({error,data}){
  20.         if(error){
  21.             console.log('error == '+JSON.stringify(error));
  22.         }else if(data){
  23.             console.log('data == ', JSON.stringify(data));
  24.             this.oppItemArr = JSON.parse(JSON.stringify(data));
  25.  
  26.  
  27.  
  28.           //Start split multipiclist
  29.         if(data.length >0 && data[0].Dev_App__c != undefined){
  30.             let devAppVal =  data[0].Dev_App__c;
  31.             if(devAppVal !== null && devAppVal !== undefined && devAppVal !== ''){
  32.                 devAppVal =  devAppVal.split(";");
  33.                 console.log('verticalOption2# ' +  devAppVal);
  34.                 this.devAppOption = devAppVal;
  35.                 console.log('thisVrt ' + this.devAppOption);
  36.  
  37.             }
  38.         }
  39.  
  40.         //End split multipiclist
  41.  
  42.  
  43.         }
  44.  
  45.     }
  46.  
  47.  
  48. }

 

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]

  1.   <?xml version="1.0" encoding="UTF-8"?>
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  3.     <apiVersion>56.0</apiVersion>
  4.     <isExposed>true</isExposed>
  5.     <targets>
  6.         <target>lightning__AppPage</target>
  7.         <target>lightning__RecordPage</target>
  8.         <target>lightning__HomePage</target>
  9.     </targets>
  10. </LightningComponentBundle>

 

Step 4:- Create Apex Controller : fetchRecordByIdLwcCtrl.cls

SFDX:Create Apex Class >> New >> fetchRecordByIdLwcCtrl.cls

fetchRecordByIdLwcCtrl.cls [Apex Class]

  1.   public WITH sharing class fetchRecordByIdLwcCtrl {
  2.  
  3.     @AuraEnabled(cacheable=TRUE)
  4.     public static List<Opportunity> getOptRec(Id recId){
  5.         List<Opportunity> optRecItem = [SELECT Id, Name,  Dev_App__c FROM Opportunity WHERE Id=:recId];
  6.         RETURN optRecItem;
  7.     }
  8.  
  9.  
  10. }

 
 

Further post that would you like to learn in Salesforce

 
 


 

FAQ (Frequently Asked Questions)

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

 
   
 
 

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Leave a Comment