Hello Friends, In this tutorial, We are going to learn about lightning:dualListbox widget in the lightning component. The lightning:dualListbox allows you to select one or more options from a list of available option. We will see how to use lightning:dualListbox in lightning component salesforce.

lightning:dualListbox in Lightning component.

lightning:dualListbox provides two side-by-side list box. The right side of list box contains the list of available options and left side of list box contains the list of selected options. The selected option can be move from the right side list box to the left side list box. We can also arrange the order of selected options.

The attribute of  LIGHTNING:DUALLISTBOX 

 

  • name (required): It specifies the name of the input element.
  • value: It specifies the value of the input element.
  • label (required): Label for dual list box component.
  • variant: It is used to show or hide the label of the component. Possible values are standard and label-hidden.
  • disabled: Specifies that the input element should be disabled or not. The default is false.
  • readonly: Set the read-only property of the input element. The default is false.
  • required: Set the required property of the input element. The default is false.
  • validity: Define the validity of the component with respect to validation parameters.
  • onchange: Action triggered on this event.
  • onfocus: Action triggered on this event.
  • onblur: Action triggered on this event.
  • sourceLabel: Label for the options list box.
  • options: List of options which are available for the selection.
  • requiredOptions: List of options which cannot be removed from selected options.
  • min: minimum number of that is required for selection.
  • max: maximum number of that can be selected.
  • values: List of the selected option.

In this example, I am going to show a list of skills from Position object.

Select Multiple values using lightning:dualListbox in Lightning Component Salesforce

Login to Your Salesforce account and open Developer Console.

Step 1 Create Apex Controller:

Create an apex class called MultiPicklistController that will return your multi picklist field value from the object. In my case its Skill__c from Position object. Here is the source code for Apex class.

Step 2 Create a Lightning Component

Now create a Lightning Component called MultiSelectComponent. 

MultiSelectcomponent.cmp:

MULTISELECTCOMPONENTController.js:

MULTISELECTCOMPONENTHelper.js:

Test the Lightning Component:

Call the Lightning component in a Lightning Application.

TestApp.app

Output:

lightning:dualListbox

View More:

Conclusion:

I hope you have enjoyed this session. Please don’t hesitate to comment for any technical help. Your feedback and suggestions would be appreciated,

Thank You.

Leave a Comment