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

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 1

 

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  🙂

(Visited 12,006 times, 1 visits today)

20 thoughts on “How To Fetch Multi Picklist Values From sObject To lightning:dualListbox Component”

  1. Hi,

    Can we have some values Prepopulated in the right box on load only.

    If yes can u add the code.. i tried some std attribute.. its not helping

    thanks,

     

    Reply
  2. Hi,

    Thanks for your wonderful effort. I’m getting null value when i executed above code in my org. when i debug in console object value is returning null in helper.

    <aura:attribute name=”objInfo” type=”account” default=”{‘sobjectType’:’Account’}”/>

    when we referred above attribute in helper.js using console

    var objectName = component.get(“v.objInfo”);

    console.log(objectName); it is showing null.

    Reply
  3. Hi Can you please suggest me to send selected values from client side controller to serverside for inserting selected values?

    Reply
  4. Hi,

    Can you please add code how to display selected values in that selectedbox with some values.

    Currently its not working if we do this

    component.set(“v.selectedSkillsItems”,selopts);

     

    Reply
  5. Hi , I want to load the selected values from edit view to detail view.

    component.set(“v.selectedSkillsItems”,selopts);     not working.

    How to get the already selected values selopts component

    Reply

Leave a Comment