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

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.

👉 Download Free Ebook →

👉 Get Free Course →

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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.

Don’t forget to check out:- How to create custom dynamic pagination in custom table using apex class method in Lightning Web Component (LWC). Click Here For More Information

Final Output →

You can download file directly from github by Click Here.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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]

```
  <template>
```
```
    <lightning-card>
```
```
        <h3 slot="title">
```

            <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)

```
        </h3>
```
```
        <br/>
```
```
 
```
```
    <template if:true={records}>
```
```
 
```

      <table class="tblColPad" border="1" cellpadding="5" cellspacing="5" bordercolor="#ccc" style="border-collapse:collapse;">

```
        <thead>
```
```
            <tr>
```
```
                <th>Name</th>
```
```
                <th>Amount</th>
```
```
                <th>Account Name</th>
```

                <th>CloseDate</th>

                <th>StageName</th>

```
            </tr>
```
```
        </thead>
```
```
         <tbody>
```
```
 
```

       <template for:each={records.data} for:item="oppItem">

```
                <tr key={oppItem.Id}>
```

                    <td>{oppItem.Name}</td>

                    <td>{oppItem.Amount}</td>

                    <td>{oppItem.Account.Name}</td>

                    <td>{oppItem.CloseDate}</td>

                    <td>{oppItem.StageName}</td>

```
                </tr>
```

            </template>

```
         </tbody>
```
```
     </table>
```
```
    </template>  
```
```
 
```
```
    <br/><br/>
```
```
   
```

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <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>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
</lightning-card>
```
```
</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]

   import { LightningElement, wire } from 'lwc';

import allOppRecords from '@salesforce/apex/wireDecoratorLwcCtrl.allOppRecords';

export default class WireDecoratorLwc extends LightningElement {

```
    @wire(allOppRecords)
```
```
    records;
```
```
}
```

Create Style CSS →

Step 3:- Create Style CSS : wireDecoratorLwc.css

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

wireDecoratorLwc.css [Style CSS]

```
   table.tblColPad th{background:#ddd;}
```

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]

   <?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>
```

Create Apex Class Controller

Step 5:- Create Apex Class : wireDecoratorLwcCtrl.cls

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

wireDecoratorLwcCtrl.cls [Apex Class Controller]

    public WITH sharing class wireDecoratorLwcCtrl {

```
    @AuraEnabled(cacheable=TRUE)
```

    public static List<Opportunity> allOppRecords(){

        List<Opportunity> oppList = [SELECT Id, Name, Amount, AccountId, Account.Name, CloseDate, Description, StageName FROM Opportunity];

```
        RETURN oppList;
```
```
    }
```
```
}
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link

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.

Vijay Kumar

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

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

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Create Lightning Web Component HTML →

wireDecoratorLwc.html [Lightning Web Component HTML]

Create Lightning Web Component JavaScript →

wireDecoratorLwc.js [LWC JavaScript File]

Create Style CSS →

wireDecoratorLwc.css [Style CSS]

Create Lightning Web Component Meta XML →

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

Create Apex Class Controller

wireDecoratorLwcCtrl.cls [Apex Class Controller]

What is wire decorator in LWC?

What is the use of wire decorator?

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

Related Topics | You May Also Like

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Vijay Kumar

Leave a Comment Cancel reply