lightning__AppPage Target

Enables a component to be used on an App page in Lightning App Builder. Enables a component to be used in a Lightning app, such as in a Console app.

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

Configures a page type with this attribute.

AttributeDescriptionRequired
targetsSpecify one or more page types in the targets attribute, such as <targetConfig targets="lightning__AppPage"> or <targetConfig targets="lightning__RecordPage,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. You can also include one or more event tags.

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.

AttributeTypeDescriptionRequired
nameStringThe attribute name. This value must match the property name in the component’s JavaScript class.Yes
typeStringThe 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
datasourceStringRenders 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.
defaultStringThe default value for the attribute.
descriptionStringDisplays as an i-bubble for the attribute in Lightning App Builder.
labelStringDisplays as a label for the attribute in Lightning App Builder.
maxIntegerThe maximum allowed value for an attribute of type Integer.
minIntegerThe minimum allowed value for an attribute of type Integer.
placeholderStringInput 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.
requiredBooleanSpecifies whether the attribute is required. The default value is false.

Exposes an event for Dynamic Interactions, which allows it to appear on the Events tab in the Lightning App Builder component property panel.

The event tag supports these attributes.

AttributeTypeDescriptionRequired
nameStringThe name of the event as defined in the .js file. If no label attribute is defined, the name value is shown in the list of available events for the component in Lightning App Builder.Yes
descriptionStringThe description of the event. Appears as an i-bubble on the event label in Lightning App Builder.
labelStringThe admin-friendly label for the event.

The event tag contains a required schema tag.

Provides the shape of an event. Content in the schema tag must be in JSON format.

The Dynamic Interactions feature uses only type and properties from the schema. All other items in the schema are ignored. In the event schema, valid property types are String, Integer, and Boolean. For an example schema, see Configure a Component for Dynamic Interactions in the Lightning App Builder.

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.

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

The supportedFormFactor tag supports this attribute.

AttributeTypeDescriptionRequired
typeStringDevice 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.

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

See Also