Custom Lightning Page Template

In this blog, I am going to explain how to create a template for the lightning pages which contains the different custom page regions to place the lightning components. 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.Custom Lightning page template components are supported for record pages, app pages, and Home pages. Each page type has a different interface that the template component must implement.Here are the below interfaces that support components for templates.

lightning:appHomeTemplate

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.Components that implement this interface appear in the Custom Templates section of the Lightning App Builder new page wizard for app pages.

lightning:homeTemplate

Implement the lightning:homeTemplate interface to enable your component to be used as a custom Lightning page template for the Lightning Experience Homepage. This interface has no effect except when used within Lightning Experience.

lightning:recordHomeTemplate

Implement the lightning:recordHomeTemplate interface to enable your component to be used as a custom Lightning page template for object record pages. This interface has no effect except when used within Lightning Experience.

1. Build the Template Component Structure

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 template 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.The Aura.Component[] attribute is interpreted as a region only if it’s also specified as a region in the design resource.Here is the component code that will allow you to define the record home template for lightning app builder.

2. Configure Template Regions and Components in the Design Resource

The 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.The Below code shows the designer resource code for the above component.

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.

 

Now go to app builder and create a new record page .now you can able to see the custom page template as shown below image.

After finish, you can able to see the lightning records page as shown below .you can drag and drop the lightning components into those regions.

Best Practices and limitation 

 

  1. 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.
  2. You cant able to restrict the template to any specific object means sfdc:objects are not supported in the designer resource.
  3. Don’t add custom background styling to a template component. It interferes with Salesforce’s Lightning Experience page themes.
  4. Including scrolling regions in your template component can cause problems when you try to view it in the Lightning App Builder.
  5. 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.
  6. Using getters to get the regions as variables works at design time but not at runtime.
  7. 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.
  8. A region can be used more than once in the code, but only one instance of the region should render at runtime.
  9. A template component can contain up to 25 regions.