How To Fetch Multi Picklist Values From sObject To lightning:dualListbox Component

Lightning Component

Sharing is caring!

Hi guys, today in this post we are going to learn how we can create dynamic lightning component to fetch multi picklist custom/standard field values from sObject via apex and use in ‘ lightning:dualListbox ‘  salesforce lightning component.

Check AlsoHow to Fetch Picklist value from sObject and Set in ui:inputSelect

‘ lightning:dualListbox’ component provides two side-by-side list boxes for multiple values selection. Select one or more options in the list on the left. Move selected options to the list on the right. The order of the selected options is maintained and you can reorder options.
This component inherits styling from Dueling Picklist in the Lightning Design System.

lightning:dualListbox Component

This component requires API version 41.0 and later.

 

Step 1 : Create Apex Class Controller.
Apex class [multiPicklistCtrl.apxc]

  • see code comments.

Check AlsoReusable Multi Select Custom Lookup In Salesforce Lightning Component

Step 2 : Create Lightning Component
Lightning Component [multiPicklist.cmp] 

For This Post I have create a custom field Skills__c [multi-select Picklist type] with some predefined values such as [java,html,css,apex….] in Account Object.

Client Side JavaScript Controller  [multiPicklistController.js] 

  • see code comments.
Client Side JavaScript Helper[multiPicklistHelper.js] 

  • see code comments.

Check AlsoCustom Multi-Select Picklist In Lightning Component With Select2 jQuery Plugin

TestApp.app

Output : 

dual picklist lightning component

Related Resources :

lightning:dualListbox

Dueling Picklist [Lighting Design System]

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  🙂

Sharing is caring!

(Visited 1,611 times, 19 visits today)

11 comments

Leave a Reply