Get Report Id and Object API Identify in Lightning Internet Element

Final Up to date on July 10, 2022 by Rakesh Gupta

Large Concept or Enduring Query:

• How do you entry the Id of the present report, present object API Identify, and part area’s width when utilizing the lightning internet part? 

Aims:

After studying this weblog, you’ll be capable to:

• Entry the present report Id within the lightning internet part
• Entry the present object API title within the lightning internet part
• Entry present recordId and object API title when utilizing lightning internet part in expertise builder websites
• Entry the part’s areas width if you add a part to a area on a web page within the Lightning App Builder
• and way more

Previously written a number of articles on Lightning Internet Element. Why not verify them out if 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

Janel Parrish is working as a Junior Developer at Gurukul on Cloud (GoC). Janel desires to learn to entry and show the present report Id, object API title, and the part’s areas width if you add a part to a area on a web page within the Lightning App Builder. 

Entry Report, Object Context and Element Width-Conscious When Element Used on a Lightning Report Web page

If a lightning internet part with a recordId property is used on a Lightning report web page, then the web page units recordId to the 18-character ID of the report. Create a public recordId property by declaring it utilizing @api decorator.  

If a lightning internet part with an objectApiName property is used on a Lightning report web page, then the web page units the API title of the thing related to the report being seen. Create a public objectApiName property by declaring it utilizing the @api decorator.  

If a lightning internet part with a flexipageRegionWidth property is used on a Lightning report web page, then the web page go the area’s width to the part. Create a public flexipageRegionWidth property by declaring it utilizing @api decorator.  

@api flexipageRegionWidth;

			

Entry Report, Object Context When Element Utilized in Expertise Builder Websites

Not like lightning report pages Expertise Builder Websites don’t robotically bind the recordId and objectApiName to the part’s template.

To entry the report Id of the present report it’s important to add recordId and objectApiName in an expression within the part’s *.js-meta.xml file. 

<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <goal>lightningCommunity__Default</goal>
        <goal>lightning__RecordPage</goal>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property
                title="recordId"
                kind="String"
                label="Report Id"
                description="Go the web page's report id to the part variable"
                default="{!recordId}" />
            <property
                title="objectApiName"
                kind="String"
                label="Object Identify"
                description="Go the web page's object title to the part variable"
                default="{!objectApiName}" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

			

Automation Champion Method (I-do):

Now it’s time to create a lightning internet part to entry the present Report Id, Object API Identify, and Flexipage Area Width on a report web page.

miscRecord.html

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

<template>
    <lightning-card title="Show Report ID and Object API Identify">
        <h2><b>Report ID:</b> {recordId}</h2>
        <h2><b>Object API Identify:</b> {objectApiName}</h2>
        <h2><b>Element Area’s Width:</b> {flexipageRegionWidth}</h2>
    </lightning-card>
</template>

			

miscRecord.js

This pattern JavaScript code makes use of the @api decorator to create a public recordId, objectApiName, and flexipageRegionWidth properties. 

When the lightning internet part is invoked in a report context in Lightning Expertise or the cell app, it can populate the worth to public properties we outline within the Javascript, as talked about under

1. The recordId is ready to the 18-character ID of the report.
2. The objectApiName is ready to the API title of the thing related to the report. 
3. The flexipageRegionWidth property receives the width worth of the area that the part resides in on the web page.

import { LightningElement, api } from 'lwc';

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

			

miscRecord.js-meta.xml

A lightning internet part can be utilized to construct customized pages for Lightning Expertise and the Salesforce cell app shortly with point-and-click instruments. Make certain so as to add the proper goal for it.

This configuration file makes the part out there for Lightning report web page however restricts help on desktops

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

			

Proof of Idea

Formative Evaluation:

I wish to hear from you!

What’s one factor you realized from this put up? How do you envision making use of this new information in the actual world? Be happy to share within the feedback under.