`lightning__RecordPage` Target

Enables a component to be used on a record page in Lightning App Builder.

Syntax

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>58.0</apiVersion>
4    <isExposed>true</isExposed>
5    <ai>
6        <description>AI component description. Example: The component enables users to add and style text content for dashboards, supporting features such as hyperlinks, bullet points, and text alignment. Ideal for adding formatted text sections such as instructions.</description>
7        <property name="height" aiDescription="AI description for the height property" />
8    </ai>
9    <targets>
10        <target>lightning__RecordPage</target>
11    </targets>
12    <targetConfigs>
13        <targetConfig targets="lightning__RecordPage">
14            <property name="height" type="Integer" min="0" max="600" default="300" />
15            <objects>
16              <object>Account</object>
17              <object>CustomObject__c</object>
18            </objects>
19            <supportedFormFactors>
20                <supportedFormFactor type="Large" />
21                <supportedFormFactor type="Small" />
22            </supportedFormFactors>
23
24        </targetConfig>
25    </targetConfigs>
26</LightningComponentBundle>

targetConfigs

Configures the component for an app home page and defines component properties. The targetConfigs tag contains at least one targetConfig tag.

targetConfig

Configures a Lightning page with this attribute.

Attribute	Description	Required
`targets`	Specify one or more page types in the `targets` attribute, such as `<targetConfig targets="lightning__Inbox">` or `<targetConfig targets="lightning__Inbox,lightning__AppPage">`. The `targets` attribute value must match one or more of the page types that you listed under `<targets>`.	Yes

The targetConfig tag includes at least one property tag and can include an objects tag.

property

Specifies a public property of a component that can be set in Lightning App Builder. The component author defines the property in the component’s JavaScript class using the @api decorator. See the Usage section.

Use the property tag with these attributes.

Attribute	Type	Description	Required
`name`	String	The attribute name. This value must match the property name in the component’s JavaScript class.	Yes
`type`	String	The attribute’s data type. The following values are valid for all targets. Make sure that this value matches the type assigned to the property in the component’s JavaScript module. If the types don’t match, the value in the configuration file takes precedence. `Boolean` `Integer` `String`	Yes
`datasource`	String	Renders a field as a picklist, with static values. Supported only if the `type` attribute is `String`. For example: `datasource="value1,value2,value3"`. You can also set the picklist values dynamically using an Apex class, such as: `datasource="apex://MyCustomPickList"`. For more information, see Create Dynamic Picklists for Your Custom Components.
`default`	String	The default value for the attribute.
`description`	String	Displays as an i-bubble for the attribute in Lightning App Builder.
`label`	String	Displays as a label for the attribute in Lightning App Builder.
`max`	Integer	The maximum allowed value for an attribute of type `Integer`.
`min`	Integer	The minimum allowed value for an attribute of type `Integer`.
`placeholder`	String	Input placeholder text for the attribute when it displays in Lightning App Builder. This text is the ghost text in text fields and text areas before a user starts typing. Supported only if the type attribute is `String`.
`required`	Boolean	Specifies whether the attribute is required. The default value is `false`.

objects

Limits the component to a set of one or more objects. If you don’t use this tag set, the component supports all supported objects. This tag set works only inside a parent targetConfig that’s configured for lightning__RecordPage.

Specify the objects tag set only one time inside a targetConfig set.

Use objects with the object tag.

object

Defines which objects the component is supported for. Use one object tag for each supported object.

The object tag doesn’t support external objects.

Note

See the User Interface API Developer Guide for the list of supported objects.

supportedFormFactors

A set of one or more form factors or devices that the component supports. Specify the supportedFormFactors tag set one time inside a targetConfig set. The supportedFormFactors tag contains at least one supportedFormFactors tag.

supportedFormFactor

Defines which form factor or device the component supports. Use one supportedFormFactor tag for each supported form factor.

The supportedFormFactor tag supports this attribute.

Attribute	Type	Description	Required
`type`	String	Device form factor on which the component displays. Valid values are: `Large`—Represents the desktop form factor. `Small`—Represents the phone form factor.	Yes

We strongly recommend including supported form factor information in the configuration file. See Configure Your Component for Different Form Factors.

Note

Usage

To expose a component property in Lightning App Builder, define the property in the component’s JavaScript class using the @api decorator.

1import { LightningElement, api } from "lwc";
2
3export default class Example extends LightningElement {
4  @api height;
5
6  get cmpHeight() {
7    const height = this.height ? `height: ${this.height}px;` : "";
8    return `${height}`;
9  }
10}

Bind the height property in your template.

1<template>
2  <p style={height}>Your content here</p>
3</template>

The component renders with a style value that a user provides in the Property Editor.

1<p style="height: 200px;">Your content here</p>

See Also

lightning__RecordPage Target