Make a Component Aware of Its Record Context

In some use cases, it’s helpful to make a component aware of its record context. For example, you want to provide the record context so that the component can return and display child record information on a viewed record page. To make a component aware of its object context, use the recordId property on a Lightning record page. The page then sets the property to the ID of the current record.

The lwc-recipes repo has a wireGetRecordDynamicContact component that returns some data on a contact record that’s being viewed.

Tip

Access Record Context in Lightning Experience

In the component’s JavaScript class, use the @api decorator to create a public recordId property.

1// testClass.js
2import { LightningElement, api } from "lwc";
3export default class TestClass extends LightningElement {
4  @api recordId;
5}

When your component is invoked in a record context in Lightning Experience or in the mobile app, recordId is set to the 18-character ID of the record, for example: 001xx000003DGSWAA4.

Access Record Context from a Child Component

Place the component with the recordId property directly on a record context for it to be auto-populated. If you have a child component that requires the recordId value, retrieve the record ID on the container component and pass it to the child.

1<!-- myApp.html -->
2<template>
3    <c-component record-id={recordId}> </c-component>
4</template>

Include the recordId property in your JavaScript class.

1// myApp.js
2import { LightningElement, api } from "lwc";
3
4export default class extends LightningElement {
5  @api recordId;
6}

In the child component c/component, you can retrieve record data by using the getRecord wire adapter or another wire adapter depending on your use case. For example, you can pass the record ID to a child component that loads a map based on an account’s billing address.

The recordId is set automatically only when you place or invoke the component in an explicit record context. In all other cases, the recordId isn’t set, and your component can’t depend on it. You can set the recordId yourself in such cases. For example, components used for quick actions can explicitly set the recordId if they need access to the record ID when used on a record page.

Important

Access Record Context in Experience Builder Sites

Experience Builder sites don’t automatically bind recordId to a component’s template.

After you include the @api decorator to create a public recordId property on your component, add recordId in an expression in the component’s *.js-meta.xml file. All the page types specified in the targets parameter have access to the record ID.

1<targetConfigs>
2  <targetConfig targets="lightningCommunity__Default">
3    <property
4      name="recordId"
5      type="String"
6      label="Record ID"
7      description="Specify {!recordId} in the Record ID field on the component property in Experience Builder."
8    />
9  </targetConfig>
10</targetConfigs>

To bind the page’s record ID to the component variable:

In Experience Builder, open the Components panel and drag your component to the editable area.
Select the component on the main page canvas or on the Page Structure panel. When you select the component, the component’s Record ID property displays in the floating property editor.
In the Record ID property field, enter {!recordId}.

For more information, see Edit Pages and Components in Experience Builder.

When your component is invoked in a record context in an Experience Builder site, the expression "{!recordId}" is set to the 18-character ID of the record.

See Also

Migrate Interfaces