wire decorators with custom methods in lwc -- 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

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.

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

 

Other related post that would you like to learn in LWC

  • 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]

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]

Create Style CSS →

Step 3:- Create Style CSS : wireDecoratorLwc.css

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

wireDecoratorLwc.css [Style CSS]

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]

 

Create Apex Class Controller

Step 5:- Create Apex Class : wireDecoratorLwcCtrl.cls

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

wireDecoratorLwcCtrl.cls [Apex Class Controller]

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

 

Further post that would you like to learn in LWC

 

 

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

  • Your reaction of the article ▾
 

Hi, This is Vijay 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