Add Region Labels to Your Aura Page Template Components

As part of the new template switching feature in the Lightning App Builder, you can now add labels to each region in your Aura page template components. These labels appear in the template switching wizard in the Lightning App Builder when users map region content to a new template.

Where: This change applies to orgs with Aura components in Lightning Experience and all versions of the Salesforce app.

How: In the design file for your component, add the label attribute to the flexipage:region tag like this:
<design:component label="Two Region Custom App Page Template">
    <flexipage:template >
        <!-- The default width for the "left" region is "MEDIUM". In tablets,
        the width is "SMALL" -->
            <flexipage:region name="left" label="Left Region" defaultWidth="MEDIUM">
                <flexipage:formfactor type="MEDIUM" width="SMALL" />
            </flexipage:region>
            <flexipage:region name="right" label="Right Region" defaultWidth="SMALL" />
       </flexipage:template>
</design:component>
Region labels are supported only in Aura components that implement one of these interfaces:
  • lightning:appHomeTemplate
  • lightning:homeTemplate
  • lightning:recordHomeTemplate