Call server side method using Wiring a function in LWC(Lightning web component)

Different ways to access server side controller method from LWC component

1. Wire a property
2. Wire a function
3. Call a method imperatively

1- Wire a property- 

    

This is already explained in my previous blog post. Those who want to revise or have not gone through previous post can go through this link .

In this post we are going to discuss how we can access server side controller using -

2- Wire a function-

In this component wires an Apex method call to a function. Because the results are provisioned to a function, the JavaScript can operate on the results. Also, the template accesses the data a bit differently than if results were provisioned to a property.

The rendered component is the same as apexWireMethodToProperty (except for the header).

This component calls the same Apex method as apexWireMethodToProperty. The method must be static, and global or public. The method must be decorated with @AuraEnabled(cacheable=true).

Let’s use the same example which I used in my previous blog that is displaying the contacts name getting from server side method of controller class.

LWCWireMethodToFunction.html

<template>

    <lightning-card

        title="LWCWireMethodToFunction"

        icon-name="custom:custom63">

    

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

            <template if:true={contacts}>

                <template for:each={contacts} for:item="contact">

                    <p key={contact.Id}>{contact.Name}</p>

                </template>

            </template>

            <template if:true={error}>

                <c-error-panel errors={error}></c-error-panel>

            </template>

        </div>

    </lightning-card>

</template>

The template uses the if:true directive to check for the JavaScript contacts property. If it exists, it iterates over it and renders the name of each contact. If the error property exists, the component renders <c-error-panel>.

LWCWireMethodToFunction.js

import { LightningElement, wire } from 'lwc';

import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class LWCWireMethodToFunction extends LightningElement {

    contacts;

    error;

    @wire(getContactList)

    wiredContacts({ error, data }) {

        if (data) {

            this.contacts = data;

            this.error = undefined;

        } else if (error) {

            this.error = error;

            this.contacts = undefined;

        }

    }

}

The component’s JavaScript code imports the Apex method and invokes it via the wire service. The wire service provisions the results to the wiredContacts() function via an object with either an error or data property. If the wire service provisions data, it’s assigned to this.contacts, which is used in the template. If it provisions error, it’s assigned to this.error, which is also used in the template. If the value of these properties change, the template rerenders.

ContactController.cls

public with sharing class ContactController {

    @AuraEnabled(cacheable=true)

    public static List<Contact> getContactList() {

        return [

            SELECT Id, Name, Title, Phone, Email, Picture__c

            FROM Contact

            WHERE Picture__c != null

            WITH SECURITY_ENFORCED

            LIMIT 10

        ];

    }

}

O/p-

              LWCWireMethodToFunction

                Amy Taylor

                Michael Jones

                Jennifer Wu

                Anup Gupta

                Caroline Kingsl

Thanks for reading and happy learning😃.

Stay tuned for next Post- calling server side method imperatively.

CS- LWC Recipe

Begin with LWC Development

Now almost each and every person in Salesforce ecosystem is aware of  new framework i.e. Lightning Web Component framework. So , in this blog I will be explaining how we can get the data from server side controller and can display on the component. So let's begin.

Different ways to access server side controller method from LWC component

1. Wire a property
2. Wire a function
3. Call a method imperatively

In this blog we will be looking into the first way that is by using wire a Property.

1. Wire a property-  

          Wiring a property is useful when you want to consume the data or error as-is.

          If the property decorated with @wire is used as an attribute in the template and its value                      changes, the wire service provisions the data and triggers the component to rerender.

          PS-    In this blog we are not going to dig what Wiring means , if anybody wants to dig                please go to Understand the Wire Service link.

          Lets see an example to understand- In this example,we will display the contacts name on            the component which we will be getting from server side controller class.

          Lets first create the UI Component- 

          lwcWireMethodProperty.html

          <template>

                  <lightning-card

                            title="lwcWireMethodProperty"

                            icon-name="custom:custom63">

    

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

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

                                          <template for:each={contacts.data} for:item="contact">

                                          <p key={contact.Id}>{contact.Name}</p>

                                          </template>

                           </template>

                         <template if:true={contacts.error}>

                                          <c-error-panel errors={contacts.error}></c-error-panel>

                         </template>

                  </div>

                  </lightning-card>

          </template>

  In this component what we are doing is using simple Lightning-card to display the contacts name if    we are getting value from the controller, else we are showing error.

          lwcWireMethodProperty.js- Client Side controller Method.

          import { LightningElement, wire } from 'lwc';

          import getContactList from '@salesforce/apex/ContactController.getContactList';

          export default class lwcWireMethodProperty extends LightningElement {

           @wire(getContactList) contacts;

          }

          

Whenever we are using @wire service , we have to import it also like we do for LightningElement (import { LightningElement, wire } from 'lwc';).

After that what we are doing is importing the method which we have created in the server side controller to get the list of contacts.

Notes- Synatax for Importing the method-

Import methodName from '@salesforce/apex/ApexControllerName.methodName'

Now lets understand what 

@wire(getContactList) contacts; is doing - it is getting the list of contacts from getContactList method and wiring the apexMethod(getContactList) to property called contacts which is used as an attribute in the template.(check html component if condition)

              ContactController.cls- this is server side controller class containing method which is                          returning list if contact.

              In order to make this available for lightning component or LWC , this method must be                          @AuraEnabled.

              public with sharing class ContactController {

                           @AuraEnabled(cacheable=true)

                            public static List<Contact> getContactList() {

                                 return [

                                              SELECT Id, Name, Title, Phone, Email, Picture__c

                                              FROM Contact

                                              WHERE Picture__c != null

                                              WITH SECURITY_ENFORCED

                                              LIMIT 10

                                            ];

                          }

               }

O/p-

         lwcWireMethodProperty

          Amy Taylor

          Michael Jones

          Jennifer Wu

          Anup Gupta

          Caroline Kingsl

Thanks for reading and happy learning😃.

Stay tuned for next Post- calling server side method using Wire a function.

CS- LWC Recipe