Home
Usage of lightning:appHomeTemplate

Usage of lightning:appHomeTemplate

By December 2, 2018 Lightning 0 Comments
Now with the custom app page templates, you no longer limited to the standard templates available for Lightning app pages. Take your business needs in hand, and create a custom page template of your own that has the structure and components that you define. Add as many regions as you need, and even custom styling.  Every standard Lightning page is associated with a default template component, which defines the page’s regions and what components the page includes. Custom Lightning page template components let you create page templates to fit your business needs with the structure and components that you define. Once implemented, your custom template is available in the Lightning App Builder’s new page wizard for your page creators to use. Implement the lightning:appHomeTemplate interface to enable your component to be used as a custom Lightning page template for pages of type App Page. This interface has no effect except when used within Lightning Experience and the Salesforce app. Each template component should implement only one template interface. Template components shouldn’t implement any other type of interface, such as flexipage:availableForAllPageTypes or force:hasRecordId. A template component can’t multi-task as a regular Lightning component. It’s either a template, or it’s not.

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

Keep these best practices and limitations in mind when creating Lightning page template components.
  • 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.

 

Related Posts