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 Component to Select multiple countrys from the dropdown.
Step1: Create Lightning Component MultiSelectPickList.cmp and use the below code.
Step2:Add controller file to above component called MultiSelectPickListController.js to make a call to server and to handle funtions.
Note: In doIn function I am using setTimeOut function as my server call was taking.No need to use it if your server call is fast.
Use below code for Controller.
Step3: Now I am adding helper file to handle function which is calling from SelectOption in Controller.I am using helper file because this function we need to call several times.You will understand once you go through the code.
Use below code for Helper file.
Step4: Now our component is ready.We are left with Apex controller to get list of countrys from the org.
Use below code for Apex controller.
Comments
Post a Comment