For Multi Select Pick List we can use lightning-dual-listbox/lightning:dualListbox which is base component in both Web Components and Aura Components.This component represents a two side-by-side list boxes.
Multi Select Pick List using Base Component look like this.
But only Con in this is it will use more space and it looks unique when placed with other fields.So we will create Custom Component using existing SLDS which consumes less space and looks good when we placed with other input fields.
Our Custom Component will look like this when we finish the development.
- Here highlighted part apart from the Lighting Input to show the Country Values,I am using lightning-pill base component to show the country's selected and on click x to remove the selected country.
Follow the below to Steps to Create Custom Multi Select Lightning Web Component to Select multiple countrys from the dropdown.
Step1: Create Lightning Web Component MultiSelectPickList_LWC.html and use the below code.
Here I have used basic HTML and for styling I have used Lightning Design System.
Note: In LWC we cannot put conditions for div class,So I have declared track property for div class and changing the property values in java script.
Step2: Create add code in java script file in already created Web component MultiSelectPickList_LWC.js
Here when you save it may throw error,as we are yet to create our Apex Controller.Why wait go and create Apex Class to get the Countrys list from server.
Step3: Create a new apex class with name used in Lightning Web Component i.e., LWC_getCountryPickListValues.cls
Happy Learning!!
LWC Local Development SetUp
Best Practice: How to avoid Multiple Server Calls in Lightning Components
Create MultiSelect PickList in Aura Components
How are you getting data from apex? I tried and i get either undefined or [object,object]. It doesnt go inside the for loop for populating the options variable. Kindly help on this.
ReplyDeleteHere I am using wrappr class in apex to get country values..If u are not using any wrapper class just use response.getReturnValue().Please paste ur to further check
DeleteCan we do it without using apex controller?
ReplyDeleteyes we can do it...data u can add in component itself..
DeleteI tried it in your code which you have shared above but not able to do it.
DeleteThis comment has been removed by the author.
ReplyDeletehaii guys,
ReplyDeletei want lwc component which shows all contacts record associated with an account in multi select picklist
my wrapper class:
public class WrapperclassForOpportunity {
@AuraEnabled(cacheable=true)
public static List getopp(){
List accWrapperList = new List();
opportunity getopp=[select id, accountid,closedate,stagename from opportunity where id=:'0062v00001TDCVoAAP'];
system.debug(getopp);
account acc= [select id, name from account where id=:getopp.accountId];
system.debug(acc);
list conlist1=new list();
list conlist2=new list();
for(contact con:[select name,Primary_Contact__c from contact where accountid=:acc.id]){
if(con.Primary_Contact__c!=true){
conlist1.add(con);
system.debug('conlist1:'+conlist1);
}
else{
conlist2.add(con);
system.debug('conlist2:'+conlist2);
}
}
if(!conlist1.isEmpty() && !conlist2.isEmpty()){
payWrap myWrap= new payWrap();
mywrap.conlist=conlist1;
myWrap.primaryconlist=conlist2;
accWrapperList.add(myWrap);
}
system.debug(accWrapperList);
return accWrapperList;
}
public class payWrap{
@AuraEnabled
public List conlist{get;set;}
@AuraEnabled
public List primaryconlist{get;set;}
}
}
js file:
import { LightningElement,track,wire,api} from 'lwc';
import getopp from '@salesforce/apex/WrapperclassForOpportunity.getopp';
export default class MultiPickList1 extends LightningElement {
@track contactlist=[];
@track primarycontactlist=[];
@wire(getopp) opplist({error,data}){
if (data) {
this.contactlist = data[0].conlist;
this.primarycontactlist=data[0].primaryconlist;
alert('this.primarycontactlist@@ '+ JSON.stringify (data[0].primaryconlist) );
alert('primarycontactlist:'+this.primarycontactlist);
alert('this.contactlist@@ '+ JSON.stringify (data[0].conlist) );
alert('contactlist:'+this.contactlist);
}
}
}
html file:
what i m doing wrong with this code can someone help me.
Can we do this for getting records of a Object as well? I have a requirement that in a component a delegated admin wants to select multiple permission sets and assign those selected permission sets to a single user in one transaction.
ReplyDeletetracbiYes-e Steven Hart https://www.kaftanblady.com/profile/caeleighnastassja/profile
ReplyDeleteseconschriste