Last Updated on July 10, 2022 by Rakesh Gupta

Big Idea or Enduring Question:

• How do you access the Id of the current record, current object API Name, and component region’s width when using the lightning web component? 

Objectives:

After reading this blog, you’ll be able to:

• Access the current record Id in the lightning web component
• Access the current object API name in the lightning web component
• Access current recordId and object API name when using lightning web component in experience builder sites
• Access the component’s regions width when you add a component to a region on a page in the Lightning App Builder
• and much more

In the past written a few articles on Lightning Web Component. Why not check them out while you are at it?!

1. Check User Permissions for Logged-In User in Lightning Web Component
2. Add Lightning Web Components in Mobile and Lightning Experience as Tabs

Business Use case

Janel Parrish is working as a Junior Developer at Gurukul on Cloud (GoC). Janel wants to learn how to access and display the current record Id, object API name, and the component’s regions width when you add a component to a region on a page in the Lightning App Builder. 

Access Record, Object Context and Component Width-Aware When Component Used on a Lightning Record Page

If a lightning web component with a recordId property is used on a Lightning record page, then the page sets recordId to the 18-character ID of the record. Create a public recordId property by declaring it using @api decorator.  

@api recordId;

If a lightning web component with an objectApiName property is used on a Lightning record page, then the page sets the API name of the object associated with the record being viewed. Create a public objectApiName property by declaring it using the @api decorator.  

@api objectApiName;

If a lightning web component with a flexipageRegionWidth property is used on a Lightning record page, then the page pass the region’s width to the component. Create a public flexipageRegionWidth property by declaring it using @api decorator.  

@api flexipageRegionWidth;

Access Record, Object Context When Component Used in Experience Builder Sites

Unlike lightning record pages Experience Builder Sites do not automatically bind the recordId and objectApiName to the component’s template.

To access the record Id of the current record you have to add recordId and objectApiName in an expression in the component’s *.js-meta.xml file. 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property
                name="recordId"
                type="String"
                label="Record Id"
                description="Pass the page's record id to the component variable"
                default="{!recordId}" />
            <property
                name="objectApiName"
                type="String"
                label="Object Name"
                description="Pass the page's object name to the component variable"
                default="{!objectApiName}" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Automation Champion Approach (I-do):

Now it’s time to create a lightning web component to access the current Record Id, Object API Name, and Flexipage Region Width on a record page.

miscRecord.html

To reference a recordId, objectApiName, and flexipageRegionWidth in a template, use {property} syntax, which is the same syntax we use to reference any JavaScript property.

<template>
    <lightning-card title="Display Record ID and Object API Name">
        <h2><b>Record ID:</b> {recordId}</h2>
        <h2><b>Object API Name:</b> {objectApiName}</h2>
        <h2><b>Component Region’s Width:</b> {flexipageRegionWidth}</h2>
    </lightning-card>
</template>

miscRecord.js

This sample JavaScript code uses the @api decorator to create a public recordId, objectApiName, and flexipageRegionWidth properties. 

When the lightning web component is invoked in a record context in Lightning Experience or the mobile app, it will populate the value to public properties we define in the Javascript, as mentioned below

1. The recordId is set to the 18-character ID of the record.
2. The objectApiName is set to the API name of the object associated with the record. 
3. The flexipageRegionWidth property receives the width value of the region that the component resides in on the page.

import { LightningElement, api } from 'lwc';

export default class MiscRecord extends LightningElement {
    @api recordId;
    @api objectApiName;
    @api flexipageRegionWidth;
}

miscRecord.js-meta.xml

A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it.

This configuration file makes the component available for Lightning record page but restricts support on desktops

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

Proof of Concept

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.