Thursday, 18 March 2021

Display Picklist values dynamically in lightning component


Requirement:
While working on one of the user stories of Engineering sector project for a client based out of Tampa, FL, USA;  there was a requirement to provide an interface that would display selected Industry (Pick-list field) values for Accounts on the fly while performing Mass Edit.

Challenge: 

Mass Edit feature was implemented using the Custom Lightning component. And, t
here is no out-of-the-box (OOTB) feature available to display selected pick-list values in the in lightning component, while bulk edit is being performed.

Solution:
To overcome this limitation, we have created an Apex class that contains the mechanism to retrieve the list of Industry (pick-list) field values from the Account object.

This Apex class is then used by Custom Lightning Component (BulkEdit.Cmp) which displays the list of Accounts. Using component.get ("v.pickvalues") in DynamicPickController component, we are retrieving selected pick-list values from the Parent Component (BulkEdit.cmp). 

Then Industry pick-list values are being compared with the values that have been retrieved from Parent Component. If field values are matched, it will set the selected Industry field value.

If values are not matched, then it will set the first value from the pick list options.

Once comparison is done,  value is set to the attribute IndustryPick that we have defined in the Custom DynamicPickController.Cmp component.

BulkEdit.cmp
<aura:iteration items="{!v.selectedlst}" var="ac" >
                                    <c:DynamicPickController selectedOptions = '{!v.selectedlst}'
                                                  Name = '{!ac.lstTelLineAccLocUserobject2.Name}'
                                                  Industry = '{!ac.lstTelLineAccLocUserobject2.Industry}'
                                                  pickvalues = '{!v.pickvalues}'
                                                  />
</aura:iteration>

DynamicPickController.Js
doInit : function(component, event, helper) {
        var IndustryPick = [];
        for(var i = 0 ; i < component.get("v.pickvalues").length ; i++)
        {
            if(component.get("v.pickvalues")[i] == component.get("v.Industry"))  
            {
                IndustryPick.push({"label":component.get("v.pickvalues")[i], "value":component.get("v.pickvalues")[i], "selected":true})
            }
            else
            {
                IndustryPick.push({"label":component.get("v.pickvalues")[i], "value":component.get("v.pickvalues")[i]})
            }
        }
        component.set("v.IndustryPick", IndustryPick);
    }

DynamicPickController.Cmp
<aura:attribute name="pickvalues" type="list"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:select name="Industry" label="Select a Industry:" aura:id="Industry" value="{!v.Industry}">
                <aura:iteration items="{!v.IndustryPick}" var="option">
                    <option text="{!option.label}" value="{!option.label}" selected="{!option.selected}"/>
                </aura:iteration>
</lightning:select>

Output:

If you have any questions you can reach out our Salesforce Consulting team here.

No comments:

Post a Comment