Lightning Component for Custom Lightning Templates


Lightning App Builder provides flexibility to create custom Lightning pages which can be used in opposite of standard Lightning pages. Even though every standard Lightning page is associated with a default template component, Custom Lightning page template components are useful when you want a customized template for your business needs.

Custom Lightning pages can be created for.....
  • App Page - When you want to create separate pages for each app.
  • Home Page - When you want to create separate pages to override the standard home page.
  • Record Page - When you want to create pages on record level for different objects.

  • In order to create custom Lightning Templates for App/Home/Record pages, it is required to implement below interface for each.
  • lightning:appHomeTemplate
  • lightning:homeTemplate
  • lightning:recordHomeTemplate

  • Note** 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.

    Below is a sample custom Lightning page template component (Component and Design Resources) for Home page that implements "lightning:homeTemplate" interface, which will further expose the custom component in Lightning App Builder for creating custom Lightning page. Here "TempHome.design" resource controls what kind of page can be built on the template by specifying what regions a page that uses the template must have and what kinds of components can be put into those regions.

    TempHome.cmp
    <aura:component implements="lightning:homeTemplate" description="Custom Template for the Home Page">
        <aura:attribute name="cmp1" type="Aura.Component[]" />
        <aura:attribute name="cmp2" type="Aura.Component[]" />
        <aura:attribute name="cmp3" type="Aura.Component[]" />
        
        <div>
            <lightning:layout horizontalAlign="spread">
                <lightning:layoutItem size="4">
                    {!v.cmp1}
                </lightning:layoutItem>
                <lightning:layoutItem size="4">
                    {!v.cmp2}
                </lightning:layoutItem>
                <lightning:layoutItem size="4">
                    {!v.cmp3}
                </lightning:layoutItem>            
            </lightning:layout>        
        </div>    
    </aura:component>
    

    TempHome.design
    <design:component label="Custom Home Page Template">
        <flexipage:template >
            <flexipage:region name="cmp1" defaultWidth="Xlarge" />
            <flexipage:region name="cmp2" defaultWidth="Xlarge" />
            <flexipage:region name="cmp3" defaultWidth="Xlarge" />
        </flexipage:template>
    </design:component>
    

    Now once I have created above component, I should be able to create a new Lightning page for my Home page using above custom component Lightning template. Similarly we can create component templates for App and Record pages just by replacing interface to "lightning:appHomeTemplate" and "lightning:recordHomeTemplate" respectively.



    Best Practices to use Lightning Page Template Component:
  • Don’t add custom background styling to a template component. It interferes with Salesforce’s Lightning Experience page themes.
  • Including scrolling regions in your template component can cause problems when you try to view it in the Lightning App Builder.
  • 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 run time. Here’s an example of what we mean.

  • Resource Links:
  • Create a Custom Lightning Page Template Component
  • Comments

    1. Can we create Subtabs for the App Page Template and put different components in each tab. I Created the skeleton for subtabs. but in the app builder I am not able to move to other subtabs for putting different components

      ReplyDelete

    Post a Comment

    Popular posts from this blog

    Displaying Toast Message from Modal in Lightning Components

    Lightning RecordForm - An enhanced Lightning Data Service

    Lightning Component to display dynamic sObject data