How to read Page Layout in LWC?

In this section, we will learn how to use getRecordUi in our Lightning Web Component(LWC).
We will build one LWC by which we can show Account Information by using the same Account record id for learning purposes. We will do this by “getRecordUi” function.

Basically, getRecordUi is used to get metadata information of the records in Salesforce. By this function, we will read the Account Page Layout and read the value of some fields present in that Page Layout.

So, we have created one LWC named “showAccountInfobyRecordUi”.

Step 1: Update showAccountInfobyRecordUi.xml file to enable the LWC for Lightning Pages.

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

Step 2: Need to update showAccountInfobyRecordUi.js file as per following code snippet

import { LightningElement, api, wire } from "lwc";
import { getRecordUi } from "lightning/uiRecordApi";

export default class ShowAccountInfobyRecordUI extends LightningElement {
  @api recordId;
  accountName;
  accountNumber;

  @wire(getRecordUi, {
    recordIds: "$recordId",
    layoutTypes: "Full",
    modes: "View",
  })
  wiredRecord({ error, data }) {
    if (data) {
      this.accountName = data.records[this.recordId].fields["Name"].value;
      this.accountNumber =
        data.records[this.recordId].fields["AccountNumber"].value;
    } else{
      // TODO: Data handling
    }
  }
}

We need to maintain the following steps to use “getRecordUi” function.

• First, we need to import “getRecordUi” from “lightning/uiRecordApi”.
• Next, we need to invoke “getRecordUi” method using the wire adapter and we need to pass the layout type and mode as described in the code snippet. This will return the value of all the fields resides in the Page Layout.
  • layout types can be ‘Compact’ or ‘Full’ and modes can be ‘Create, ‘Edit’ or ‘View’
• Here, we want to fetch Account Name from the fields returned by this getRecordUi function by writing this code:

  data.records[this.recordId].fields["Name"].value

• We are able to access fields from the Account Page Layout by using the “getRecordUi” function.

Step 3: Now, we have to update the showAccountInfobyRecordUi.html file to show the Account Name and Account Number.

<template>
  <lightning-card title="Account Information">
    <lightning-layout>
      <lightning-layout-item padding="around-small">
        Account: {accountName} <br />
        Account Number: {accountNumber}
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>

Step 4: Place this component in any Account record page and we will get this following output

28,155 total views, 6 views today