How to retrieve opportunity records in custom table invoke apex method using @wire decorators in Lightning Web Component – lwc | how to use @wire decorators to fetch the opportunity records in custom table using apex class method in LWC – Lightning Web Component

1,932 views

Hey guys, today in this post we are going to learn about How to retrieve opportunity records in custom table invoke apex method using @wire decorators in Lightning Web Component – lwc

The Lightning Web Components programming model has three decorators that add functionality to a property or function.

@api:- To expose a public property, decorate a field with @api. Public properties define the API for a component.

Why Should You Schedule Meeting?

🎯 If You Are Facing Any Of These 6 Challenges. Schedule Meeting With Me.

  • Learn Salesforce Development
  • Career Confusion
  • No Interview Call
  • Low Salary
  • No Promotion/Growth
  • No Finding New Job Opportunity
  • Why you stucking from past so many years in same company?

 

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

@track:- If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value. If a field is assigned an object or an array, the framework observes some changes to the internals of the object or array, such as when you assign a new value.

@wire:- To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method. To know more details about Decorators, Click Here..

 

Files we used to fetch the Opportunity records using @wire decorators in Salesforce LWC →

wireDecoratorLwc.html LWC HTML File Template HTML file to fetch opportunity records using @wire decorator in Salesforce Lightning Web Component (LWC)
wireDecoratorLwc.js LWC JavaScript File In the javascript file we import the Apex class method to fetch the opportunity records in Salesforce LWC
wireDecoratorLwc.css Style CSS It is used to fixed the alignment of the data table as padding and border in lwc component.
wireDecoratorLwc.js-meta.xml XML Meta File It is used to where this lightning web component file you want to display as lightning__AppPage, lightning__RecordPage, lightning__HomePage.

 

 

Final Output →

wire decorators with custom methods in lwc -- w3web.net

 

You can download file directly from github by Click Here.

 

 

Other related post that would you like to learn in Salesforce

  • Find the below steps ▾

 

Create Lightning Web Component HTML →

Step 1:- Create Lightning Web Component : wireDecoratorLwc.html

SFDX:Lightning Web Component >> New >> wireDecoratorLwc.html

wireDecoratorLwc.html [Lightning Web Component HTML]

  1.   <template>
  2.     <lightning-card>
  3.         <h3 slot="title">
  4.             <lightning-icon icon-name="standard:opportunity" size="small"></lightning-icon> Retrieve opportunity records uses of  <span style="color: #ff8000;">@wire Decorators</span> in Lightning web components (LWC)  
  5.         </h3>
  6.         <br/>
  7.  
  8.     <template if:true={records}>
  9.  
  10.       <table class="tblColPad" border="1" cellpadding="5" cellspacing="5" bordercolor="#ccc" style="border-collapse:collapse;">
  11.         <thead>
  12.             <tr>
  13.                 <th>Name</th>
  14.                 <th>Amount</th>
  15.                 <th>Account Name</th>
  16.                 <th>CloseDate</th>               
  17.                 <th>StageName</th>              
  18.             </tr>
  19.         </thead>
  20.          <tbody>
  21.  
  22.        <template for:each={records.data} for:item="oppItem">
  23.                 <tr key={oppItem.Id}>
  24.                     <td>{oppItem.Name}</td>
  25.                     <td>{oppItem.Amount}</td>
  26.                     <td>{oppItem.Account.Name}</td>
  27.                     <td>{oppItem.CloseDate}</td>                    
  28.                     <td>{oppItem.StageName}</td>
  29.                 </tr>
  30.             </template>                 
  31.          </tbody>
  32.      </table>
  33.     </template>  
  34.  
  35.     <br/><br/>
  36.    <!--Start RelatedTopics Section-->
  37. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  38.  
  39.             <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>
  40.  
  41.             <br/><br/>
  42.             <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>
  43.             <div style="display:block; overflow:hidden;"> 
  44.                 <div style="width: 50%; float:left; display:inline-block">
  45.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  46.                         <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>
  47.                         <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>
  48.                         <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>
  49.                         <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>
  50.                         <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>
  51.                     </ul>
  52.             </div>
  53.  
  54.             <div style="width: 50%; float:left; display:inline-block">
  55.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  56.                         <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>
  57.                         <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>
  58.                         <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>
  59.                         <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>
  60.                         <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>
  61.                     </ul>
  62.                 </div>
  63.                <div style="clear:both;"></div> 
  64.                <br/>
  65.                 <div class="youtubeIcon">
  66.                     <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>
  67.                 </div>
  68.     </div>
  69.  
  70. </div>
  71.  
  72.   <!--End RelatedTopics Section-->
  73. </lightning-card>
  74. </template>

Create Lightning Web Component JavaScript →

Step 2:- Create Lightning Web Component : wireDecoratorLwc.js

SFDX:Lightning Web Component >> New >> wireDecoratorLwc.js

wireDecoratorLwc.js [LWC JavaScript File]

  1.    import { LightningElement, wire } from 'lwc';
  2. import allOppRecords from '@salesforce/apex/wireDecoratorLwcCtrl.allOppRecords';
  3. export default class WireDecoratorLwc extends LightningElement {
  4.     @wire(allOppRecords)
  5.     records;
  6. }

Create Style CSS →

Step 3:- Create Style CSS : wireDecoratorLwc.css

SFDX:Lightning Web Component >> New >> wireDecoratorLwc.css

wireDecoratorLwc.css [Style CSS]

  1.    table.tblColPad th{background:#ddd;}
  2. table.tblColPad th, table.tblColPad td {padding:5px !important;}

Create Lightning Web Component Meta XML →

Step 4:- Create Lightning Web Component : wireDecoratorLwc.js-meta.xml

SFDX:Lightning Web Component >> New >> wireDecoratorLwc.js-meta.xml

wireDecoratorLwc.js-meta.xml [LWC Meta Data XML]

  1.    <?xml version="1.0" encoding="UTF-8"?>
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  3.     <apiVersion>45.0</apiVersion>
  4.     <isExposed>true</isExposed>
  5.     <targets> 
  6.         <target>lightning__AppPage</target>
  7.         <target>lightning__RecordPage</target>
  8.         <target>lightning__HomePage</target>
  9.     </targets>
  10. </LightningComponentBundle>

 

Create Apex Class Controller

Step 5:- Create Apex Class : wireDecoratorLwcCtrl.cls

From Developer Console >> File >> New >> Apex Class

wireDecoratorLwcCtrl.cls [Apex Class Controller]

  1.     public WITH sharing class wireDecoratorLwcCtrl {    
  2.     @AuraEnabled(cacheable=TRUE)
  3.     public static List<Opportunity> allOppRecords(){
  4.         List<Opportunity> oppList = [SELECT Id, Name, Amount, AccountId, Account.Name, CloseDate, Description, StageName FROM Opportunity];
  5.         RETURN oppList;
  6.     }
  7. }

 
wire decorators with custom methods in lwc -- w3web.net

 

Further post that would you like to learn in Salesforce

 

 

FAQ (Frequently Asked Questions)

What is wire decorator in LWC?

The Lightning Web Components programming model has three decorators that add functionality to property or function. Decorators dynamically alter the functionality of a property or function.

What is the use of wire decorator?

When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method. you can able to see the inputMessage property values is coming from the apex class.

What are the differences between @API @wire @track LWC decorators?

A field can have only one decorator. The @api decorator simply makes a field public and allows its value to be set from the outside. The @api decorator doesn't tell LWC to observe mutations like @track does. In theabove code, example-contact-tile-object exposes its contact field as a public property.

Related Topics | You May Also Like

 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder

👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration




Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Leave a Comment