Use aura:template to Create App Templates

You can customize Aura application by extending your own template. For this you can create a template by extending component.

Syntax to create template:-
First create a aura component and set isTemplate attribute true and extends “aura:template” component.
aura:template component contains some attribute like title, loadingText, errorTitle, errorMessage, defaultBodyClass, doctype and bodyClass. You can read detail about all attribute on salesforce.

myTemplate.cmp


<aura:component isTemplate="true" extends="aura:template">
    <aura:set attribute="title" value="Salesforce XYZ"/>
    <aura:set attribute="loadingText" value="Loading my App Name"/>
    <aura:set attribute="errorTitle" value="Custom Error Title"/>
	<!-- you can write custom css for loading text message-->
	<aura:html tag="style">
        body{
        font-family: 'Salesforce Sans',Arial,sans-serif;
        display: block;
        line-height: 1.5;
        margin: 0;
        font-size: .8125rem;
        background: transparent;
        color: rgb(22, 50, 92);
        -webkit-tap-highlight-color: transparent;
        overflow-y:hidden;
        }
        .auraMsgBox {        
            background:#f25b8c;
            background-repeat: repeat-x;
            background-position: top left;        
            width: 350px;
        	height: 75px;
            border: none;
            box-shadow: none;
        }
        
        .auraMsgBox h2 {
        	color: #fff;
        }
        </aura:html>
</aura:component>

Use template in your application

<aura:application extends="force:slds" template="c:MyTemplate">
   <p>Using my own template</p> 
</aura:application>

When application loading->
aura:template lightning

Leave a Reply

Your email address will not be published. Required fields are marked *