Lesson: 41 | Fetching and Displaying Account Information using getRecord in LWC

Notes

HTML

<template>
    <template if:true={account.data}>
        <div class="slds-box slds-theme_default">
            <h2 class="slds-text-heading_medium">Account Information</h2>
            <p><strong>Name:</strong> {name}</p>
            <p><strong>Phone:</strong> {phone}</p>
            <p><strong>Website:</strong> <a href={website} target="_blank">{website}</a></p>
        </div>
    </template>

    <template if:true={account.error}>
        <p class="slds-text-color_error">Error loading account data.</p>
    </template>
</template>

JavaScript

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_PHONE from '@salesforce/schema/Account.Phone';
import ACCOUNT_WEBSITE from '@salesforce/schema/Account.Website';

export default class AccountInfo extends LightningElement {
    @api recordId; // Automatically gets the Account ID when used on a record page

    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME, ACCOUNT_PHONE, ACCOUNT_WEBSITE] })
    account;

    // Getter to return field values safely
    get name() {
        return this.account?.data?.fields?.Name?.value || 'No Name';
    }

    get phone() {
        return this.account?.data?.fields?.Phone?.value || 'No Phone';
    }

    get website() {
        return this.account?.data?.fields?.Website?.value || 'No Website';
    }
}