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