In design section you can control which attributes are exposed to builder tools like the Lightning App Builder, Experience Builder, or Flow Builder. A design resource lives in the same folder as yours .cmp resource, and describes the design-time behavior of the Aura component—information that visual tools need to display the component in a page or app.
<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>- Here design:component tag is the root element for the design resource. It contains design time configuration for tools such as the App Builder to use.
- Label is the name of the design that can be seen when the component is referred in App builder and flows.
- design:attribute – To make an Aura 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.
- In a design:attribute node, Flow Builder supports only the name, label, description, and default attributes. The other attributes, like min and max, 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. |
<design:suppportedFormFactors> and <design:suppportedFormFactor> Tags
Use these tag sets to designate which devices your component supports. The design:suppportedFormFactor subtag supports the type attribute. Valid type values are Large (desktop) and Small (phone).
<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:supportedFormFactors>
<design:supportedFormFactor type="Large"/>
<design:supportedFormFactor type="Small"/>
</design:supportedFormFactors>
</design:component>
<sfdc:objects> and <sfdc:object> Tags
Use these tag sets to restrict your component to one or more objects.
- aren’t supported in Experience Builder or the Flow Builder.
- They’re also ignored when setting a component to use as an object-specific action or to override a standard action.
<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:supportedFormFactors>
<design:supportedFormFactor type="Large"/>
<design:supportedFormFactor type="Small"/>
</design:supportedFormFactors>
<sfdc:objects>
<sfdc:object>Custom__c</sfdc:object>
<sfdc:object>Opportunity</sfdc:object>
</sfdc:objects>
</design:component>
Note:
A Design is in lightning bundle is saved as componentName.design. If you component name is My_Lightning_Component, then a controller will be saved as My_Lightning_Component.design.
Akhil Kulkarni 