Lightning Picklist/Select : Aura vs LWC


Lightning Picklist/Select : Aura Component

PickListOptionsController(Apex Controller )

public class PickListOptionsController {
    @AuraEnabled        
    public static List getPickListOptionList(String objectName, String picklistFieldName){
        List picklistOptionList = new List();
        Schema.SObjectType convertToObj = Schema.getGlobalDescribe().get(objectName);
        Schema.DescribeSObjectResult res = convertToObj.getDescribe();
        Schema.DescribeFieldResult fieldResult = res.fields.getMap().get(picklistFieldName).getDescribe();
        List ple = fieldResult.getPicklistValues();
        for( Schema.PicklistEntry pickListVal : ple){
            picklistOptionList.add(pickListVal.getLabel());
        }     
        return picklistOptionList;
    }
}

PickListOptionsComponent.cmp (Component)


<aura:component controller="PickListOptionsController" access="global" >
 <aura:attribute name="objectName" type="String" default="Opportunity" />
 <aura:attribute name="picklistFieldName" type="String" default="StageName" />
 <aura:attribute name="picklistValues" type="List" />
        <aura:attribute name="opp" type="Opportunity" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <lightning:layout>
        <lightning:layoutItem flexibility="auto" padding="around-small">
            <div class="custom-box">
                <lightning:select value="{!v.opp.StageName}">       
                     <option value="">Choose one...</option>
                   <aura:iteration items="{!v.picklistValues}" var="item">
                     <option value="{!item.value}">
                          {!item}
                     </option>
                   </aura:iteration>
                </lightning:select>
           </div>
       </lightning:layoutItem> 
       </lightning:layout>
</aura:component>


PickListOptionsComponent.js (JS Controller )

({
    doInit : function(component) {
        var action = component.get("c.getPickListOptionList");
        action.setParams({
            objectName: component.get("v.objectName"),
            picklistFieldName: component.get("v.picklistFieldName")
        });
        action.setCallback(this, function(response) {
            var list = response.getReturnValue();
            component.set("v.picklistValues", list);
        })
        $A.enqueueAction(action);
    }
})

Lightning Picklist/Select : Lightning Web Component


LightningPicklist.html (Template)


<template>
<div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
<lightning-layout multiple-rows>
<lightning-card icon-name="standard:record" title="{strTitle}">            
        <lightning-layout-item size="12" medium-device-size="6" large-device-size="6" small-device-size="12" padding="around-small">
                <div>
                    <template if:true={stageNamePicklist}>
                        <lightning-combobox name="stageName"
                            label="Opportunity Stage Name"
                            value={stageName} options={stageNamePicklist} onchange={handleStageNameChange}>
                        </lightning-combobox>
                    </template>
                </div>
          </lightning-layout-item>
</lightning-card>
</lightning-layout>  
</div>
</template>


LightningPicklist.Js (JS Controller )


import { LightningElement,wire,api,track } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import OPPORTUNTITY_OBJECT from '@salesforce/schema/Opportunity';
import STAGE_NAME_FIELD from '@salesforce/schema/Opportunity.StageName';
export default class LocalMattersGroupDetails extends LightningElement {
    @track stageNamePicklist='';
    strTitle=''
    stageName='OPPORTUNTITY STAGE';
    //Get Object Information
    @wire(getObjectInfo, { objectApiName: OPPORTUNTITY_OBJECT})
    objectInfo;

    // 'Group' is recordType name on OPPORTUNTITY_OBJECT
    //Get RecordTypeId
    get recordTypeId() {
        const rtis = this.objectInfo.data.recordTypeInfos;
        return Object.keys(rtis).find(rti => rtis[rti].name === 'Group');
    }
    //Get PickList Information : OPPORTUNTITY_STAGE
    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: STAGE_NAME_FIELD})
    stageNamePicklist;
    handleStageNameChange(event) {
        this.stageName= event.target.value;
        // eslint-disable-next-line no-console
        console.log("Stage Name :", this.stageName);
    }
}


LightningPicklist.js-meta.xml (XML for Config File in Salesforce)



<lightningcomponentbundle fqn="LightningDataTable" xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiversion>45.0</apiversion>
    <isexposed>true</isexposed>  
    <targets>  
        <target>lightning__RecordPage</target>  
    </targets>  
</lightningcomponentbundle>


Note: After save whole code you will drag and drop code into Lightning Record Detail Page of Opportunity

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!

Comments

Popular posts from this blog

Salesforce LWC : Compact Layout on Hover

Salesforce LWC With Third Party JS : D3

Communications between Lightning Components : Salesforce