Lightning Component Bundle Design Resources

Use a design resource to control which attributes are exposed to builder tools like the Lightning App Builder, Community Builder, or Cloud Flow Designer. A design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Lightning component—information that visual tools need to display the component in a page or app.
For example, here’s a simple design resource that goes in a bundle with a “Hello World” component.
<design:component label="Hello World">
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
    <design:attribute name="greeting" label="Greeting" />
</design:component>

design:component

This is the root element for the design resource. It contains the component’s design-time configuration for tools such as the App Builder to use.

Attribute Description
label Sets the label of the component when it displays in the Lightning App Builder. When creating a custom Lightning page template component, this text displays as the name of the template in the Lightning App Builder new page wizard.
Note

Note

Label expressions in markup are supported in .cmp and .app resources only.

design:attribute

To make a Lightning component attribute available for admins to edit in tools such as the App Builder, add a design:attribute node for the attribute into the design resource. An attribute marked as required in the component definition automatically appears, unless it has a default value assigned to it.

For Lightning page interfaces, the design resource supports only attributes of type Integer, String, or Boolean. To see which attribute types the lightning:availableForFlowScreens interface supports, go to Considerations for Configuring Components for Flow Screens.

Note

Note

In a design:attribute node, the Cloud Flow Designer supports only the name, label, and description attributes. The other attributes are ignored.

Attribute Description
datasource Renders a field as a picklist, with static values. Only supported for String attributes.
<design:attribute name="Name" datasource="value1,value2,value3" />

You can also set the picklist values dynamically using an Apex class. See Create Dynamic Picklists for Your Custom Components for more information.

Any String attribute with a datasource in a design resource is treated as a picklist.

default Sets a default value on an attribute in a design resource.
<design:attribute name="Name" datasource="value1,value2,value3" default="value1" />
description Displays as an i-bubble for the attribute in the tool.
label Attribute label that displays in the tool.
max If the attribute is an Integer, this sets its maximum allowed value. If the attribute is a String, this is the maximum length allowed.
min If the attribute is an Integer, this sets its minimum allowed value. If the attribute is a String, this is the minimum length allowed.
name Required attribute. Its value must match the aura:attribute name value in the .cmp resource.
placeholder Input placeholder text for the attribute when it displays in the tool.
required Denotes whether the attribute is required. If omitted, defaults to false.
Note

Note

Label expressions in markup are supported in .cmp and .app resources only.

<sfdc:object> and <sfdc:objects>

Use these tag sets to restrict your component to one or more objects.
Note

Note

<sfdc:object> and <sfdc:objects> aren’t supported in Community Builder or the Cloud Flow Designer. They’re also ignored when setting a component to use as an object-specific action or to override a standard action.

Here’s the same “Hello World” component’s design resource restricted to two objects.
<design:component label="Hello World">
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
    <design:attribute name="greeting" label="Greeting" />
    <sfdc:objects>
        <sfdc:object>Custom__c</sfdc:object>
        <sfdc:object>Opportunity</sfdc:object>
    </sfdc:objects>
</design:component>

If an object is installed from a package, add the namespace__ string to the beginning of the object name when including it in the <sfdc:object> tag set. For example: objectNamespace__ObjectApiName__c.

See Also