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. BalakrishnanOctober 12, 2018 at 5:44 AM

      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
    2. Tech9logy Creators - Web Design And Development CompanyJanuary 14, 2019 at 2:33 AM

      Really Informative
      Read How Salesforce Lightning Increases Productivity

      ReplyDelete
    3. PoLApril 11, 2019 at 11:18 AM

      Great job. If you want to know more about templates you should visit this site where there are many different categories including dentistry website templates

      ReplyDelete
    4. Sandeesh PhulkarJanuary 12, 2020 at 1:32 AM

      Can we create pinned regions in custom templates for console app ?

      ReplyDelete
    5. store.tech9logyMay 18, 2020 at 9:59 PM

      Nice article!
      I found many useful information in your blog, it was awesome to read,thanks for sharing this great content, keep sharing..
      Custom Lightning Lead Conversion W/O Opportunity

      ReplyDelete
    6. realityJuly 15, 2020 at 7:31 AM

      Thanks for such wonderful article.
      Is it possible to use server side controller with lightning:recordHomeTemplate. I have a use case where I want to store some details on user click.
      I tried but not able to connect server side apex method. Dint find any documentation regarding the same.

      ReplyDelete

    Post a Comment

    Popular posts from this blog

    Lightning Data Service - Salesforce new Apex alternative - Part 2

    -
    Image
    We have looked on some basic code for Loading and Updating a record using Lightning Design System in my last blog post. Here we are going to work on creating and deleting a record in Lightning Component using Lightning Design System. 1. Creating a Record: For creating a new record using LDS we declare force:recordData without assigning a recordId unlike what we use to do with Load and Update record. And then we load a record template by calling the getNewRecord function on force:recordData and finally we handle saving data using saveRecord in our 'handleSaveRecord' function. Lightning Components Developer guide already have some basic code on creating a Contact record ( Reference Link ). We are going to extend that code a bit to first create a new Account record and then create a new Contact record by linking it to the Account that we created all in one single shot. Below we are going to create a new Lighting Component from Developer Console by navigating to File...
    Read more

    Using JavaScript Promises in Lightning Components

    -
    Image
    With JavaScript being a single threaded process by nature, using "JavaScript Promises" it makes JavaScript to be a multithreaded or in other words it is a process of making Asynchronous calls using JavaScript. JavaScript Promises is a native JavaScript functionality that can be used in Lightning Components. Salesforce recommends using ECMAScript 6 (ES6, often referred to as “Harmony”) which is a standard script language. In case if the browser doesn’t provide a native version, the framework uses a polyfill so that promises work in all browsers supported for Lightning Experience. Basic Syntax for Promises: var promise = return new Promise(function(resolve, reject) { setTimeout(resolve, 100 , 'foo' ); }); Promise can return either resolve (If the result is success) and reject (If the result is fail). Optionally there is one more status called pending. Now let's go ahead and build a simple Lightning Component that will output some user information like...
    Read more

    Two-factor authentication using LWC

    -
    Use Case: In this blog we are going take the use case to build "Two-factor authentication (EMAIL)" using Lightning Web Component. This use case is going to be helpful to place an extra layer of security, especially when when we try to expose Salesforce sensitive data using Public Sites (or) Communities. Code Components: Below we are going to use 3 main code components to implement Two-factor email authentication. 1. CommonUtility.cls : Apex class that has two methods. One method to generate unique 6 digit code using crypto class and another method to generate single email message and dispatch email. public with sharing class CommonUtility { @AuraEnabled(cacheable= true ) // Method to send 6 digit two-factor email verification public static String twoFactorGen(String usrEmail) { String verCode = genUniqueCode(); // generate unique 6 digit code Messaging.SingleEmailMessage message = new Messaging.SingleEmailMessage(); // ins...
    Read more