Salesforce Lightning

Design in Lightning Bundle

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.
AttributeDescription
datasourceRenders 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.
defaultSets a default value on an attribute in a design resource.

<design:attribute name=”Name” datasource=”value1,value2,value3″ default=”value1″ />
descriptionDisplays as an i-bubble for the attribute in the tool.
labelAttribute label that displays in the tool.
maxIf the attribute is an Integer, this sets its maximum allowed value. If the attribute is a String, this is the maximum length allowed.
minIf the attribute is an Integer, this sets its minimum allowed value. If the attribute is a String, this is the minimum length allowed.
nameRequired attribute. Its value must match the aura:attribute name value in the .cmp resource.
placeholderInput placeholder text for the attribute when it displays in the tool.
requiredDenotes 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s