`lightningCommunity__Default` Target

Enables a component in Experience Builder to expose editable properties when the component is selected. Only properties defined for thelightningCommunity__Page or lightningCommunity__Theme_Layout targets are editable in Experience 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    <targets>
6        <target>lightningCommunity__Page</target>
7        <target>lightningCommunity__Default</target>
8    </targets>
9    <targetConfigs>
10        <targetConfig targets="lightningCommunity__Default">
11            <property name="myString" type="String" default="jsMetaValue"></property>
12            <property name="backgroundColor" type="Color" default="#ff00ff"></property>
13        </targetConfig>
14    </targetConfigs>
15</LightningComponentBundle>

targetConfigs

Configures the component for different page types and defines component properties. For Experience Builder sites, only lightningCommunity__Default supports component properties. The targetConfigs tag contains at least one targetConfig tag.

targetConfig

Configures a page type with this attribute.

Attribute	Description	Required
`targets`	Specify one or more page types in the `targets` attribute, such as `<targetConfig targets="lightningCommunity__Default">` or `<targetConfig targets="lightningCommunity__Default,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.

property

Specifies a public property of a component that can be set in Experience 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` `Color`—Displays a color selector. Use the `default` attribute to specify RGBA, RGB, or hex strings. For example: `<property type="Color" name="backgroundColor" default="rgba(0, 255, 255, 1)" />`. `ContentReference`—Displays a window in Experience Builder for selecting Salesforce CMS content. You can use the `filter` attribute to restrict the window contents to specific content types. For example: `<property type="ContentReference" name="contentId" label="Content ID" filter="cms_image, cms_video" />`.	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 Experience Builder.
`exposedTo`	String	Required if you use the `screenResponsive` attribute. The valid value is `css`.
`filter`	String	Supported only when the `type` is `ContentReference`. Specifies the Salesforce CMS content type to display in the component in Experience Builder. Valid values are: `cms_document` `cms_image` `cms_video` `news` `custom_type`, where `custom_type` is the name of a custom content type
`label`	String	Displays as a label for the attribute in Experience 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 Experience 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`.
`screenResponsive`	Boolean	Specifies if a component integer or string property is screen-size responsive. The default value is `false`. To allow the component to use the correct property value based on the user’s screen-size, set `screenResponsive` to `true` and set the `exposedTo` attribute to `css`.

Usage

To expose a component property in Experience builder, define the property in the component’s JavaScript class using the @api decorator.

1import { LightningElement, api } from "lwc";
2export default class MyComponent extends LightningElement {
3  @api myString;
4  @api backgroundColor;
5}

You can’t make certain changes to <property> tags on a custom component that’s used in a site or managed package. For more information, see the Considerations section in Configure a Component for Experience Builder.

Note

See Also