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.

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

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.

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.

Include the recordId property in your JavaScript class.

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.

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.

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

  1. In Experience Builder, open the Components panel and drag your component to the editable area.
  2. 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.
  3. 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