Skip to main content

How to Create Multi pick list value select and remove in Lightning component

Hello friends, today we learn in this post , how to create multi pick list value select and remove ,...
let us start........

Step=>1.
             go to developer console and go to File=>New=>Lightning Component
         
              multiPicklist.cmp

           <aura:component controller="multiPicklistCtrl">
    <!--init handler event call "initialize" function on component load
        and fetch picklist values-->
    <aura:handler name="init" value="{! this }" action="{! c.initialize }"/>
 
    <!--Declare Attributes-->
    <aura:attribute name="objInfo" type="account" default="{sobjectType : 'Account'}" />
    <aura:attribute name="listSkillsOptions" type="List" default="[]"/>
    <aura:attribute name="selectedSkillsItems" type="List" default="[]"/>
 
    <!-- lightning dualListbox component -->
    <lightning:dualListbox aura:id="selectOptions"
                           name="Skills"
                           label= "Select Skills"
                           sourceLabel="Available Options"
                           selectedLabel="Selected Options"
                           options="{! v.listSkillsOptions }"
                           value="{! v.selectedSkillsItems }"
                           onchange="{! c.handleChange }"/>
    <br/>
 
    <lightning:button variant="brand" label="Selected Items" onclick="{!c.getSelectedItems }" />
</aura:component>

Step=>2.

           multiPicklistController.js

          ({
    initialize: function(component, event, helper) {
       // call the fetchPickListVal helper function,
       // and pass (component, Field_API_Name, target_Attribute_Name_For_Store_Value) 
        helper.fetchPickListVal(component, 'Skills__c', 'listSkillsOptions');
    },
    handleChange: function (component, event) {
       // get the updated/changed values 
        var selectedOptionsList = event.getParam("value");
       // get the updated/changed source
        var targetName = event.getSource().get("v.name");
     
        // update the selected itmes
        if(targetName == 'Skills'){
            component.set("v.selectedSkillsItems" , selectedOptionsList);
        }
     
    },
    getSelectedItems : function(component,event,helper){
       // get selected items on button click
        alert(component.get("v.selectedSkillsItems"));
    }
})

Step=>3.

        multiPicklistHelper.js

          ({
fetchPickListVal: function(component, fieldName,targetAttribute) {
      // call the apex class method and pass fieldApi name and object type
        var action = component.get("c.getselectOptions");
        action.setParams({
            "objObject": component.get("v.objInfo"),
            "fld": fieldName
        });
        var opts = [];
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                var allValues = response.getReturnValue();
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        label: allValues[i],
                        value: allValues[i]
                    });
                }
                component.set("v."+targetAttribute, opts);
            }else{
                alert('Callback Failed...');
            }
        });
        $A.enqueueAction(action);
    },
})


Step=>4.

Create a Apex Class
                         goto File=>New=>Apex Class


        multiPicklistCtrl.apxc

             public class multiPicklistCtrl {
 
    @AuraEnabled
    public static List < String > getselectOptions(sObject objObject, string fld) {
        system.debug('objObject --->' + objObject);
        system.debug('fld --->' + fld);
        List < String > allOpts = new list < String > ();
        // Get the object type of the SObject.
        Schema.sObjectType objType = objObject.getSObjectType();
     
        // Describe the SObject using its object type.
        Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
     
        // Get a map of fields for the SObject
        map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap();
     
        // Get the list of picklist values for this field.
        list < Schema.PicklistEntry > values =
            fieldMap.get(fld).getDescribe().getPickListValues();
     
        // Add these values to the selectoption list.
        for (Schema.PicklistEntry a: values) {
            allOpts.add(a.getValue());
        }
        system.debug('allOpts ---->' + allOpts);
        allOpts.sort();
        return allOpts;
    }
 
}

Step=>5.
           create a App test
                      go to File=>New=>Lightning Application
                               testApp.app
                           
                       type this code for test your component
                       <aura:application extends="force:slds">
                                     <c:multiPicklist/>
                      </aura:application>

 after that right hand corner click on Preview.....   
   


                                Output:

click full for watching video clearly in video section...



Thanks.!
     

Buy me a coffeeBuy me a coffee

Comments

Post a Comment

Popular posts from this blog

How to used slds-hide/show class for div hide and show in lightning component

Hello friends today post ,how to create a lightning component to use slds-hide/show class, very easy to use class and aplly.. so let us start ... firstly create a lightning component and there are two or three div or anything when you want to hide/show ... so see given bellow example and udes slds-hide/show class Step=>1.                   goto developer console=>File=>New=>Lightning Component                           sldshideshow.cmp <aura:component >     <aura:attribute name="First" type="string" default="slds-show"/>     <aura:attribute name="Second" type="string" default="slds-hide"/>         <center>     <div class="slds-box" style="width:300px;height:300px;margin-top:15px;">         <div class="{!v.First}">         ...

How to Create Floating Marquee

Hello frnds today post , how to create floating Marquee in Lightning Component so let us begin............. Step=>1. goto developer console                             File=>New=>Lightning Component                    FloatingMarq.cmp                  <aura:component>       <aura:handler name="init" value="{!this}" action="{!c.doInit}" />     <aura:attribute name="intervalId" type="Integer" default="0"/>       <div id="parentDIV" style="overflow:hidden">         <p style="position:relative;" id="tofloat">             <b><span style="color:red">Important Note : </span>             I am Floating (Left to Right) Imformation...</b...

Create Overlays with the New Modal Component

Hello friends, Now modal tag is available in #LWC, we can create a modal using the #LWC Standard tag. snapshot given below with code. Step-1 Create LWC component Step-2 Add below code Step-3 I am showing how my component is look like. Thanks for reading