Showing Static Record using Apex to Wire Mechanism

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

8,356 total views, 3 views today