Usage of lightning:appHomeTemplate
1. Build Template Component Structure
You need to create a custom template is a Lightning component bundle that should include at least a .cmp resource and a design resource. The .cmp resource must implement a lightning:appHomeTemplate interface, and declare an attribute of type Aura.Component[] for each template region. The Aura.Component[] type defines the attribute as a collection of components.
<aura:component implements="lightning:appHomeTemplate"> <aura:attribute name="top" type="Aura.Component[]" /> <aura:attribute name="center" type="Aura.Component[]" /> <aura:attribute name="botton" type="Aura.Component[]" /> <div class="slds-grid slds-grid_vertical"> <div class="slds-col"> {!v.top} </div> <div class="slds-col"> {!v.center} </div> <div class="slds-col"> {!v.botton} </div> </div> </aura:component>
2.Configure Design Resource
The design resource controls what kind of page can be built on the template. The design resource specifies what regions a page that uses the template must have. It also specifies what kinds of components can be put into those regions. Here’s the design file that goes with the .cmp resource. The label text in the design file displays as the name of the template in the new page wizard.
<design:component label="Custom App Page Template"> <flexipage:template > <flexipage:region name="top" defaultWidth="LARGE"/> <flexipage:region name="center" defaultWidth="LARGE" /> <flexipage:region name="botton" defaultWidth="LARGE" /> </flexipage:template> </design:component>
The component designer will support these tags
flexipage:template
This tag has no attributes and acts as a wrapper for the flexipage:region tag.
flexipage:region
This tag defines a region on the template and has these attributes.
flexipage:formFactor
Use this tag to specify how much space the component takes on the page based on the type of device that it renders on. This tag should be specified as a child of the flexipage:region tag. Use multiple flexipage:formFactor tags per flexipage:region to define flexible behavior across form factors.
3. (Optional) Add a Template Image
If you added a description to your .cmp resource, both it and the template image display when a user selects your template in the Lightning App Builder new page wizard. Here is the simple SVG code the component.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <g><path d="M10,336.7h571.7v326.7H10V336.7z"/><path d="M581.7,91.7L990,500L581.7,908.3V91.7z"/></g> </svg>
4. Use in App Builder App Page Template
Now we are going to use this template to build the custom app page template as shown below. To use this app Page templates go to the lightning app builder and include this template like as shown below.
Best Practices
- Custom templates can’t be extensible nor extended—you can’t extend a template from anything else, nor can you extend other things from a template.
- Using getters to get the regions as variables works at design time but not at runtime.
- Don’t add custom background styling to a template component.
- Including scrolling regions in your template component can cause problems when you try to view it in the Lightning App Builder.
- You can remove regions from a template as long as it’s not being used by a Lightning page, and as long as it’s not set to access=global. You can add regions at any time.
- A region can be used more than once in the code, but only one instance of the region should render at runtime.
- A template component can contain up to 25 regions.