Apex Imperative Method

Already, we have studied how to get data from Lightning Platform Database using wire mechanism in Lightning Web Component. Now, we will study how to get data from Lightning Platform Database using Imperative Way in Lightning Web Component.

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
	publicstaticList<Contact> getImperativeContactList(){
		return [SELECTId, Name, EmailFROMContactLIMIT1];
	}
}

getImperativeContactList() method of the Apex Class “LWC_ContactController” returns the Contact Record. Please notice that we didn’t use cacheable = true for getImperativeContactList() 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 “showContactsIM“. As per previous examples, we need to update the “showContactsIM.js-meta.xml” file to set the visibility in Lightning App Builder.

showContactsIM.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showContactsIM">
    <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.

showContactsIM.html

<template>
    <lightning-card title="Apex Imperative Method">            
        <lightning-layout>
          <lightning-layout-item flexibility="auto" padding="around-small">
               <template if:true={contacts}>                        
                    <template for:each={contacts} for:item="contact">                        
                        <p key={contact.Id}>                               
                            {contact.Name}
                            <lightning-formatted-email value={contact.Email} class="slds-m-left_medium"></lightning-formatted-email>
                        </p>
                    </template>
                </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.

showContactsIM.js

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

export default class ShowContactsIM extends LightningElement {
    @track contacts;
    @track error;

    connectedCallback(){ //you can build a method for a button
        getImperativeContactList()
        .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 “getImperativeContactList” from the Apex Class, “LWC_ContactController”. Then, we have invoked a method with the same name of adapter which is getImperativeContactList() using javascript promise during component creation(connectedCallback()). We have set the result to the respective reactive properties such as contacts and error.

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

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

Result

23,217 total views, 3 views today