Introduction

The main concept included in this recipe is to showcase the usage of the @wire adapter named getRecord.

as explained here.

<aside> 💡 Review the following section to grasp the capabilities of this wire adapter:

Accessing Data with LWC

</aside>

The getRecord adapter is one of wire adapters available inside the module named lightning/uiRecordApi. It is is a wrapper to the UI Api GET /ui-api/records/{recordId} with multiple parameter options such as the field values we want to retrieve, in this case the fieldsarray.

To do so, it is required to decorate a property or a function, where the results are returned when executing the adapter.

But instead of accessing the UI API, using this adapter, is much more convenient and easier in the Javascript part of an LWC.

<aside> 📁 You can find this LWC in this relative path: force-app\\main\\default\\lwc\\wireGetRecordStaticContact

</aside>

This LWC can be placed on a page where a contact record is displayed, and this is the reason we need to go to the Contacts Tab.

XML file

In the configuration file, the only object that is allowed to have this LWC is the Contact object. This is necessary as, the fields considered might not be present on other objects, and the LWC would fail.

<targetConfigs>
      <targetConfig targets="lightning__RecordPage">
          <objects>
              <object>Contact</object>
          </objects>
      </targetConfig>
  </targetConfigs>

Template file

The template basically checks for content on contact.data and displays properties like name, title, phonean email using getter functions.

The template conditionally shows the right sub-template depending on the results obtained by the getRecord adapter.

<aside> ☝ Review this page recordId and objectApiName special properties and Accessing Data with LWC, which are the basics for understanding this LWC.

</aside>

...
	<template lwc:if={contact.data}>
        <div class="slds-var-m-around_medium">
            <p>{name}</p>
            <p>{title}</p>
            <p>
                <lightning-formatted-phone
                    value={phone}
                ></lightning-formatted-phone>
            </p>
            <p>
                <lightning-formatted-email
                    value={email}
                ></lightning-formatted-email>
            </p>
        </div>
    </template>
    <template lwc:elseif={contact.error}>
        <c-error-panel errors={contact.error}></c-error-panel>
    </template>
...

Javascript file

At the beginning, adapters are imported: