Category: Lightning Web Component

Now, we will see how to get Salesforce data as static way using Apex.

We have built a LWC named “showWireApexStaticContact“.

Step 1: We have created an Apex Class named “LWC_ContactController” by which we will send the Contact record to Lightning Web Component. We can use the same class.

LWC_ContactController.cls

public with sharing class LWC_ContactController{
	@AuraEnabled(cacheable=true)
	public static Contact getStaticContact(){
		return [SELECT Id, Name, Title, Phone, Email FROM Contact LIMIT 1];
	}
}

getStaticContact() method returns the Contact Record.

Step 2: As per previous examples, we need to update the “showWireApexStaticContact.js-meta.xml” file to set the visibility in Lightning App Builder.

showWireApexStaticContact.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showWireApexStaticContact">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 3: Need to write the respective HTML file.

showWireApexStaticContact.html

<template>
        <lightning-card title="Showing Static Record (Wire * Apex)">            
            <lightning-layout> 
              <lightning-layout-item flexibility="auto" padding="around-small">
                   Contact
                   <template if:true={contactObj.data}> 
                        <div class="slds-m-around_medium">
                            <p>{name}</p>
                            <p>{phone}</p>
                            <p><lightning-formatted-email value={email}></lightning-formatted-email></p>
                        </div>
                    </template>
                    <template if:true={contactObj.error}>
                        {contactObj.error}>
                    </template>
              </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
</template>

Step 4: Now, we need to work on the JS file.

showWireApexStaticContact.js

import { LightningElement, wire } from 'lwc';
import { getSObjectValue } from '@salesforce/apex';
import getStaticContact from '@salesforce/apex/LWC_ContactController.getStaticContact';

import CONTACT_NAME_FIELD from '@salesforce/schema/Contact.Name';
import CONTACT_PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import CONTACT_EMAIL_FIELD from '@salesforce/schema/Contact.Email';

export default class ShowStaticContact extends LightningElement {

    @wire(getStaticContact) contactObj;

    get name(){
        return this.contactObj.data
            ? getSObjectValue(this.contactObj.data, CONTACT_NAME_FIELD)
            : '';
    }

    get phone(){
        return this.contactObj.data
            ? getSObjectValue(this.contactObj.data, CONTACT_PHONE_FIELD)
            : '';
    }

    get email(){ 
        return this.contactObj.data
            ? getSObjectValue(this.contactObj.data, CONTACT_EMAIL_FIELD)
            : '';
    }
}

We have imported getSObjectValue from ‘@salesforce/apex’ and getStaticContact from our own Apex Class “LWC_ContactController” to get the Contact record.

In all getter functions(name.phone..), System will find out the specific field from the entire Contact Record by getSobjectValue() function.

Step 5: Need to add this component into Lightning App/Home or Record Page.

Result

10,481 total views, 15 views today

Now, we will see how to get Salesforce data as static way using Apex with Imperative way.

We have built a LWC named “showImperativeApexStaticContact“.

Step 1: We have created an Apex Class named “LWC_ContactController” by which we will send the Contact record to Lightning Web Component. We can use the same class.

LWC_ContactController.cls

public with sharing class LWC_ContactController{
	@AuraEnabled
	public static Contact getImperativeStaticContact(){
		return [SELECT Id, Name, Title, Phone, Email FROM Contact LIMIT 1];
	}
}

getImperativeStaticContact() method returns contact record. We have not set cacheable = true due to application of imperative mechanism.

Step 2: As per previous examples, we need to update the “showImperativeApexStaticContact.js-meta.xml” file to set the visibility in Lightning App Builder.

showImperativeApexStaticContact.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showImperativeApexStaticContact">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 3: Need to write the respective HTML file.

showImperativeApexStaticContact.html

<template>
        <lightning-card title="Showing Static Record (Imperative * Apex)">            
            <lightning-layout> 
              <lightning-layout-item flexibility="auto" padding="around-small">
                   Contact
                   <template if:true={contactObj}> 
                        <div class="slds-m-around_medium">
                            <p>{name}</p>
                            <p>{phone}</p>
                            <p><lightning-formatted-email value={email}></lightning-formatted-email></p>
                        </div>
                    </template>
                    <template if:true={error}>
                        {error}>
                    </template>
              </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
</template>

Step 4: Now, we need to work on the JS file.

showImperativeApexStaticContact.js

import { LightningElement, track } from 'lwc';
import { getSObjectValue } from '@salesforce/apex';
import getImperativeStaticContact from '@salesforce/apex/LWC_ContactController.getImperativeStaticContact';

import CONTACT_NAME_FIELD from '@salesforce/schema/Contact.Name';
import CONTACT_PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import CONTACT_EMAIL_FIELD from '@salesforce/schema/Contact.Email';

export default class ShowImperativeApexStaticContact extends LightningElement {

    @track contactObj;
    @track error;

    connectedCallback(){
        getImperativeStaticContact()
        .then(result => {
            this.contactObj = result;
            this.error = undefined;
        }).catch(error=>{
            this.error = error;
            this.contactObj = undefined;
            
        })
    }
    

    get name(){
        return this.contactObj
            ? getSObjectValue(this.contactObj, CONTACT_NAME_FIELD)
            : '';
    }

    get phone(){
        return this.contactObj
            ? getSObjectValue(this.contactObj, CONTACT_PHONE_FIELD)
            : '';
    }

    get email(){
        return this.contactObj
            ? getSObjectValue(this.contactObj, CONTACT_EMAIL_FIELD)
            : '';
    }
}

In the imperative mechanism, we have set the contacts Private Reactive Property (during component creation time) to the contact record coming from the said Apex Class. Remaining process in same as wire mechanism.

Step 5: Need to add this component into Lightning App/Home or Record Page.

Result

8,583 total views, 9 views today

Now, we will study how to get data based on some parameters from Lightning Platform Database using Imperative Way with Parameters in Lightning Web Component.

To do this exercise, we will show the Contact Records when user will click Search button after provided the Account Name.

Step 1: We have created an Apex Class named “LWC_ContactController” by which we will send the Contact record based on Account Name to Lightning Web Component. We can use the same class.

LWC_ContactController.cls

public with sharing class LWC_ContactController{
	@AuraEnabled
       public static List<Contact> searchImperativeContactList(String accountName){
           if (String.isBlank(accountName)) {
                return new List<Contact>();
            }
            String key = '%' + accountName + '%';
            return [SELECT Id, Name, Email FROM Contact WHERE Account.Name LIKE : key];
       }
}

searchImperativeContactList() method of the Apex Class “LWC_ContactController” returns the Contact Record based on Account Name. Please notice that we didn’t use cacheable = true for searchImperativeContactList() method just like wiring mechanism. That is the primary difference between wiring mechanism and imperative mechanism.

Step 2: After that, we have built a LWC named “showContactsIMP”. As per previous examples, we need to update the “showContactsIMP.js-meta.xml” file to set the visibility in Lightning App Builder.

showContactsIMP.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showContactsIMP">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 3: Need to write the respective HTML file.

showContactsWMP.html

<template>
    <lightning-card title="Apex Imperative Method With Parameters">            
        <lightning-layout>  
            <lightning-layout-item flexibility="auto" padding="around-small">        
                <lightning-layout-item flexibility="grow">
                    <lightning-input label="Enter Account Name" 
                                    type="search"  
                                    onchange={searchContact} 
                                    value={searchKey}>
                    </lightning-input>
                </lightning-layout-item>
                <lightning-layout-item class="slds-p-left_xx-small">
                    <lightning-button
                        label="Search"
                        onclick={doSearch}
                    ></lightning-button>
                </lightning-layout-item> 
                <lightning-layout-item class="slds-m-bottom_small">  
                    <template if:true={contacts}>                        
                        <template for:each={contacts} for:item="contact">                        
                            <p key={contact.Id}>                               
                                {contact.Name}
                            </p>
                        </template>
                    </template>
                    <template if:true={error}>
                        {error}>
                    </template>
                </lightning-layout-item>   
            </lightning-layout-item>              
        </lightning-layout>
      </lightning-card>
</template>

Step 4: Now, we need to work on the JS file.

showContactsIMP.js

import { LightningElement, track } from 'lwc';
import searchImperativeContactList from '@salesforce/apex/LWC_ContactController.searchImperativeContactList';


export default class ShowContactsIMP extends LightningElement {

    @track contacts;
    @track error;

    searchContact(event){        
        this.searchKey = event.target.value;        
    }

    doSearch() {
        searchImperativeContactList({ accountName: this.searchKey })
            .then(result => {
                this.contacts = result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.contacts = undefined;
            });
    }

}

As per the imperative mechanism writing rules, first we have imported “searchImperativeContactList” from the Apex Class, “LWC_ContactController”. We have built a function named “doSearch()” where the same adapter searchImperativeContactList() is invoked using javascript promise. We need to pass the parameter as Search Key/Account Name.Here, we don’t need to put ‘$’ sign before property during configuration of parameters. We have set the result to the respective reactive properties such as contacts and error.

We didn’t use cacheable = true for searchImperativeContactList() method as per imperative mechanism guide line.

Step 5: At last, need to add this LWC into Lightning App/Home or Record Page.

Result

77,643 total views, 21 views today