Salesforce How to create Lightning App Builder - record page and use

🔹 Overview

In Salesforce, the Lightning App Builder lets you create custom pages—like record pages, home pages, and app pages—using a drag-and-drop interface.
A record page is used to design how a record (like Account, Contact, or Custom Object) looks to users.

You can also add custom Lightning components (Aura or LWC) to these record pages for enhanced functionality.

⚙️ Step 1: Create a Lightning Record Page

1. Go to Setup → Lightning App Builder.
2. Click New → Record Page.
3. Choose the object (e.g., Account).
4. Select a page template (like Header, Tabs, or Related).
5. Name the page (e.g., Account Record Page).
6. Drag and drop components from the left panel (standard or custom).
7. Save and Activate the page.
8. Assign the page to App, Record Type, or Profile as required.

⚡ Step 2: Add a Custom Lightning Component (LWC) to the Record Page

Let’s create a simple Lightning Web Component (LWC) that displays a record’s details dynamically using the recordId.

📁 Component Folder Structure

lwc/
 └── recordDetails/
      ├── recordDetails.html
      ├── recordDetails.js
      └── recordDetails.js-meta.xml

lwc/
 └── recordDetails/
      ├── recordDetails.html
      ├── recordDetails.js
      └── recordDetails.js-meta.xml

🧠 recordDetails.html

<template>
    <lightning-card title="Record Details" icon-name="standard:record">
        <template if:true={record.data}>
            <p class="slds-p-horizontal_small">Name: {record.data.fields.Name.value}</p>
            <p class="slds-p-horizontal_small">Created By: {record.data.fields.CreatedBy.displayValue}</p>
            <p class="slds-p-horizontal_small">Created Date: {record.data.fields.CreatedDate.value}</p>
        </template>

        <template if:true={record.error}>
            <c-error-panel errors={record.error}></c-error-panel>
        </template>
    </lightning-card>
</template>

<template>
    <lightning-card title="Record Details" icon-name="standard:record">
        <template if:true={record.data}>
            <p class="slds-p-horizontal_small">Name: {record.data.fields.Name.value}</p>
            <p class="slds-p-horizontal_small">Created By: {record.data.fields.CreatedBy.displayValue}</p>
            <p class="slds-p-horizontal_small">Created Date: {record.data.fields.CreatedDate.value}</p>
        </template>

        <template if:true={record.error}>
            <c-error-panel errors={record.error}></c-error-panel>
        </template>
    </lightning-card>
</template>

⚙️ recordDetails.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import CREATEDBY_FIELD from '@salesforce/schema/Account.CreatedBy.Name';
import CREATEDDATE_FIELD from '@salesforce/schema/Account.CreatedDate';

export default class RecordDetails extends LightningElement {
    @api recordId; // Automatically available on Record Pages

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, CREATEDBY_FIELD, CREATEDDATE_FIELD] })
    record;
}

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import CREATEDBY_FIELD from '@salesforce/schema/Account.CreatedBy.Name';
import CREATEDDATE_FIELD from '@salesforce/schema/Account.CreatedDate';

export default class RecordDetails extends LightningElement {
    @api recordId; // Automatically available on Record Pages

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, CREATEDBY_FIELD, CREATEDDATE_FIELD] })
    record;
}

📜 recordDetails.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

✅ This makes your component available only on Record Pages for the Account and Contact objects.

🔹 Step 3: Add the Component to the Record Page

1. Go to Setup → Lightning App Builder.
2. Edit the Record Page (e.g., Account Record Page).
3. Find your component (recordDetails) in the Custom Components section.
4. Drag it onto the layout.
5. Save → Activate → Assign it to users or apps.

Now, whenever a user opens an Account record, this LWC will automatically display the details dynamically using the recordId.

💡 Step 4: Example Output

When a user views an Account record, they’ll see:

Record Details
Name: Acme Corporation
Created By: John Doe
Created Date: 2024-08-15

🧩 Additional Tips

• You can pass parameters from the record page to your component using @api properties.
• To display related lists or custom fields, add more fields to your getRecord wire.
• Combine LWC and standard components like Tabs, Highlights Panel, or Related Lists for rich record views.

🏁 Summary