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
Comments
Post a Comment