Retrieve picklist values dynamically of Opportunity Object without apex class using ‘uiObjectInfoApi’ property and displaying the selected pick-list value in Salesforce Lightning Component — LWC

[vijayk3327]

In this post we are going to learn about how to Retrieve picklist values dynamically of Opportunity Object fields of StageName without apex class using ‘uiObjectInfoApi’ property and displaying the selected pick-list value in Salesforce Lightning Component — LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ picklistValueLWC.html

`

<div class="slds-m-around_medium">

    <template if:true={OpportunityPicklist.data}>

        <lightning-combobox name="StageName" label="Stage Name" value={StageValue}

            options={OpportunityPicklist.data.values} onchange={handleChange}>

        </lightning-combobox>

    </template>        
     

    <template if:true={Prospecting}>

       <div style="background:#ddd; border:1px #ccc solid; padding:10px; margin-top:10px;"> 
        <div class="slds-page-header__name-title">
            <h4 class="slds-page-header__title">                
                <lightning-icon icon-name="standard:opportunity" size="small"></lightning-icon> Selected value is:- <span style="color:#ff8000; font-size:18px;">{StageValue}</span> 
            </h4>
        </div>
        <br/> 
           <p>This is default description of <strong style="color:brown">{StageValue} ..</strong></p><br/>
           <p><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> w3web.net</a> is the place where you can learn step-by-step about Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, JavaScript, Jquery, CSS, Configuration, Customization, Development and much <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> more…</a></p>
        </div>    
    </template>

    <template if:true={Qualification}>
        
        <div style="background:#ddd; border:1px #ccc solid; padding:10px; margin-top:10px;"> 
            <div class="slds-page-header__name-title">
                <h4 class="slds-page-header__title">                
                    <lightning-icon icon-name="standard:opportunity" size="small"></lightning-icon> Selected value is:- <span style="color:#ff8000; font-size:18px;">{StageValue}</span> 
                </h4>
            </div>
            <br/> 
               <p>This is default description of <strong style="color:brown">{StageValue} ..</strong></p><br/>
               <p><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> w3web.net</a> is the place where you can learn step-by-step about Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, JavaScript, Jquery, CSS, Configuration, Customization, Development and much <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> more…</a></p>
            </div>
    </template>

    <template if:true={NeedsAnalysis}>
        <div style="background:#ddd; border:1px #ccc solid; padding:10px; margin-top:10px;"> 
            <div class="slds-page-header__name-title">
                <h4 class="slds-page-header__title">                
                    <lightning-icon icon-name="standard:opportunity" size="small"></lightning-icon> Selected value is:- <span style="color:#ff8000; font-size:18px;">{StageValue}</span> 
                </h4>
            </div>
            <br/> 
               <p>This is default description of <strong style="color:brown">{StageValue} ..</strong></p><br/>
               <p><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> w3web.net</a> is the place where you can learn step-by-step about Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, JavaScript, Jquery, CSS, Configuration, Customization, Development and much <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> more…</a></p>
            </div>
    </template>

    <template if:true={ValueProposition}>
        <div style="background:#ddd; border:1px #ccc solid; padding:10px; margin-top:10px;"> 
            <div class="slds-page-header__name-title">
                <h4 class="slds-page-header__title">                
                    <lightning-icon icon-name="standard:opportunity" size="small"></lightning-icon> Selected value is:- <span style="color:#ff8000; font-size:18px;">{StageValue}</span> 
                </h4>
            </div>
            <br/> 
               <p>This is default description of <strong style="color:brown">{StageValue} ..</strong></p><br/>
               <p><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> w3web.net</a> is the place where you can learn step-by-step about Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, JavaScript, Jquery, CSS, Configuration, Customization, Development and much <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> more…</a></p>
            </div>
    </template>

    <template if:true={IdDecisionMakers}>
        <div style="background:#ddd; border:1px #ccc solid; padding:10px; margin-top:10px;"> 
            <div class="slds-page-header__name-title">
                <h4 class="slds-page-header__title">                
                    <lightning-icon icon-name="standard:opportunity" size="small"></lightning-icon> Selected value is:- <span style="color:#ff8000; font-size:18px;">{StageValue}</span> 
                </h4>
            </div>
            <br/> 
               <p>This is default description of <strong style="color:brown">{StageValue} ..</strong></p><br/>
               <p><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> w3web.net</a> is the place where you can learn step-by-step about Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, JavaScript, Jquery, CSS, Configuration, Customization, Development and much <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> more…</a></p>
            </div>
    </template>

    <template if:true={PerceptionAnalysis}>
        <div style="background:#ddd; border:1px #ccc solid; padding:10px; margin-top:10px;"> 
            <div class="slds-page-header__name-title">
                <h4 class="slds-page-header__title">                
                    <lightning-icon icon-name="standard:opportunity" size="small"></lightning-icon> Selected value is:- <span style="color:#ff8000; font-size:18px;">{StageValue}</span> 
                </h4>
            </div>
            <br/> 
               <p>This is default description of <strong style="color:brown">{StageValue} ..</strong></p><br/>
               <p><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> w3web.net</a> is the place where you can learn step-by-step about Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, JavaScript, Jquery, CSS, Configuration, Customization, Development and much <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"> more…</a></p>
            </div>
    </template>

</div>

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

`

Step 2:- Create Lightning Web Component Javascript ➡ picklistValueLWC.js

` import { LightningElement, wire, api, track } from 'lwc';

import { getObjectInfo } from 'lightning/uiObjectInfoApi';

import { getPicklistValues } from 'lightning/uiObjectInfoApi';

import Opportunity_OBJECT from '@salesforce/schema/Opportunity';

import StageName_FIELD from '@salesforce/schema/Opportunity.StageName';

export default class PicklistValueLWC extends LightningElement {
StageValue ='';
Prospecting= '';
Qualification = '';
NeedsAnalysis = '';
ValueProposition = '';
IdDecisionMakers = '';
PerceptionAnalysis = '';

// getting the default record type id, if you dont' then it will get master

@wire(getObjectInfo, { objectApiName: Opportunity_OBJECT })

opportunityMetadata;

// now retriving the StageName picklist values of Opportunity

@wire(getPicklistValues,

    {

        recordTypeId: '$opportunityMetadata.data.defaultRecordTypeId', 

        fieldApiName: StageName_FIELD

    }

)

OpportunityPicklist;

// display the selected picklist value


handleChange(event) {

    this.StageValue = event.detail.value;
    this.picklistVal = this.StageValue;
   if(this.picklistVal === 'Prospecting'){
      this.Prospecting = this.StageValue ;
   }else{
    this.Prospecting = '';
   }

   if(this.picklistVal === 'Qualification'){
     this.Qualification = this.StageValue ;
   }else{
    this.Qualification = '';
   }

   if(this.picklistVal === 'Needs Analysis'){
      this.NeedsAnalysis = this.StageValue ;
   }else{
    this.NeedsAnalysis = '';
   }

   if(this.picklistVal === 'Value Proposition'){
    this.ValueProposition = this.StageValue ;
 }else{
    this.ValueProposition = '';
 }

 if(this.picklistVal === 'Id. Decision Makers'){
    this.IdDecisionMakers = this.StageValue ;
 }else{
    this.IdDecisionMakers = '';
 }
 
 if(this.picklistVal === 'Perception Analysis'){
    this.PerceptionAnalysis = this.StageValue ;
 }else{
    this.PerceptionAnalysis = '';
 } 

   
}

}`

Step 3:- Create Lightning Web Component Meta XML ➡ picklistValueLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

→ Get source code live demo link:-