Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Lightning Component Bundle Design Resources
Use Lightning Components in Lightning Experience and the Salesforce Mobile App
Get Your Lightning Components Ready to Use on Lightning Pages
Use Lightning Components in Community Builder
Use Lightning Components with Flows
Add Components to Apps
Integrate Your Custom Apps into the Chatter Publisher
Use Lightning Components in Visualforce Pages
Add Lightning Components to Any App with Lightning Out (Beta)
Communicating with Events
Creating Apps
Debugging
Fixing Performance Warnings
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.
1<design:component label="Hello World">
2    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
3    <design:attribute name="greeting" label="Greeting" />
4</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.

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

Note

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.

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

Note

Attribute Description
datasource Renders a field as a picklist, with static values. Only supported for String attributes.
1<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.
1<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.

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

Note

<sfdc:object> and <sfdc:objects>

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

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

Note

Here’s the same “Hello World” component’s design resource restricted to two objects.
1<design:component label="Hello World">
2    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
3    <design:attribute name="greeting" label="Greeting" />
4    <sfdc:objects>
5        <sfdc:object>Custom__c</sfdc:object>
6        <sfdc:object>Opportunity</sfdc:object>
7    </sfdc:objects>
8</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.