3

In the Lightning App UI, can I create a custom page template? I see you can "Change" and select from a list:

select page template

But how do I create a custom one to add to the list?

2 Answers 2

4

They are called Custom Lightning Page Template Component's, and yes, you can create your own.

Custom Lightning page template components are supported for record pages, app pages, and Home pages.

Not available in lwc yet, only Aura.

Basic Sample:

<aura:component implements="lightning:appHomeTemplate" description="Main column
 and right sidebar. On a phone, the regions are of equal width">
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
 
    <div>
        <lightning:layout>
            <lightning:layoutItem flexibility="grow"
                                  class="slds-m-right_small">
                {!v.left}
            </lightning:layoutItem>
            <lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '6' }"
                                  class="slds-m-left_small">
                {!v.right}
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    
</aura:component>
2
  • Once created, will this appear in the list of templates that appear when I click the "Change" button (as highlighted in the screenshot above)?
    – jbyrd
    May 21, 2021 at 13:54
  • 1
    as long as you implement the appropriate interface, yes. The doc is pretty straightforward.
    – glls
    May 21, 2021 at 14:07
1

We can create custom lightning page template using Component Facets in aura.At first we create attribute for each column and specify size for column in component file.

<aura:component implements="lightning:appHomeTemplate;" description="5 columns flexible without header and footer." >
    <!-- Make attribute for each column -->
    <aura:attribute name="column1" type="Aura.Component[]" description="Column1"/>
    <aura:attribute name="column2" type="Aura.Component[]" description="Column2"/>
    <aura:attribute name="column3" type="Aura.Component[]" description="Column3"/>
    <aura:attribute name="column4" type="Aura.Component[]" description="Column4"/>
    <aura:attribute name="column5" type="Aura.Component[]" description="Column5"/>
   
    
    <div>
        <!-- Specify the area for each column -->
        <lightning:layout  pullToBoundary="small">
            <lightning:layoutItem size="2" padding="around-small">
                {!v.column1}
            </lightning:layoutItem>
            <lightning:layoutItem size="2" padding="around-small">         
                {!v.column2}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">         
                {!v.column3}
            </lightning:layoutItem>
            <lightning:layoutItem size="2" padding="around-small">         
                {!v.column4}
            </lightning:layoutItem>
            <lightning:layoutItem size="2" padding="around-small">         
                {!v.column5}
            </lightning:layoutItem>
        </lightning:layout>
    </div> 
</aura:component>

Then we Configure Template Regions and Components in the Design Resource.

<design:component label="5 columns flexible without header and footer.">
    <flexipage:template >
      <flexipage:region name="column1" defaultWidth="Small" />
      <flexipage:region name="column2" defaultWidth="Small" />
      <flexipage:region name="column3" defaultWidth="Large" />
      <flexipage:region name="column4" defaultWidth="Small" />
      <flexipage:region name="column5" defaultWidth="Small" />
  </flexipage:template>
     <design:supportedFormFactors>
        <design:supportedFormFactor type="Large"/>
        <design:supportedFormFactor type="Small"/>
    </design:supportedFormFactors>
</design:component>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy