function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
John LoughranJohn Loughran 

Lightning record page custom template

I am trying to create a lightning record page template with a full width header, a right side region that runs the whole length of the page and 4 sections on the left hand side.

This is what I would like it to look like:
User-added image

This is what I have so far:
User-added image

I would like my right side region to continue down the page without pushing the left side regions down with it.

I'm really new to record page layouts and not sure where to go from here.
VinayVinay (Salesforce Developers) 
Hi John,

You can try creating a custom lightning page template component.

https://salesforce.stackexchange.com/questions/343768/how-to-create-custom-page-template
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_template_component.htm
https://trailhead.salesforce.com/content/learn/modules/lightning_app_builder/lightning_app_builder_recordpage

Please mark as Best Answer if above information was helpful.

Thanks,
John LoughranJohn Loughran
Yes I am trying to create a custom lightning page template, but it is not coming out the way I drew it, I want the right side region to be the full length of the page and then the 4 other sections on the left to be next to that. I provided my code below, I am new to this so not sure how I can rework it to come out the way I drew it. 
<aura:component implements="lightning:recordHomeTemplate" description="Custom Account Layout2">

	<!-- Header -->
	<aura:attribute name="header" type="Aura.Component[]" />
    
    <!-- Subheader -->
	<aura:attribute name="subheader" type="Aura.Component[]" />
    <aura:attribute name="mid_col" type="Aura.Component[]" />
    
	<!-- two Colums --> 
	<aura:attribute name="left_col" type="Aura.Component[]" />
    <aura:attribute name="right_col" type="Aura.Component[]" />
    
    <!-- footer -->
    <aura:attribute name="footer" type="Aura.Component[]" />


    
    <!-- Layout -->
    
    
    <div>
        
        <!-- Row 1 -->
        	<lightning:layout>
        
        		<lightning:layoutItem size="12" class="">
                	{!v.header}
                </lightning:layoutItem>
                
        </lightning:layout>
        
        <!--Row 2 -->
            <lightning:layout>
               
                <lightning:layoutItem size="8" class=""> 
                    {!v.subheader}
                </lightning:layoutItem>
                
                <lightning:layoutItem size="4" class="">
            		{!v.mid_col}
            </lightning:layoutItem>

                
            </lightning:layout>
        
        <!-- Row 3 -->
              <lightning:layout>
                  
            <lightning:layoutItem size="4" class="">
            {!v.left_col}
            </lightning:layoutItem>
           
        	<lightning:layoutItem size="4" class="">
            {!v.right_col}
            </lightning:layoutItem>
                  
            </lightning:layout>
      
        <!-- footer -->
        <lightning:layout>
               
                <lightning:layoutItem size="8" class="">
                    {!v.footer}
                </lightning:layoutItem>
       
        </lightning:layout>
            
                
                       
    </div>
    

</aura:component>
  
<design:component label="Account Page Custom2">
    
    <flexipage:template>	
        
        <flexipage:region name="header" defaultwidth="Large" />
        
         <flexipage:region name="subheader" defaultwidth="Large" />
     
        <flexipage:region name="left_col" defaultwidth="Large" />
        <flexipage:region name="mid_col" defaultwidth="Large" />
        <flexipage:region name="right_col" defaultwidth="Large" />

        <flexipage:region name="footer" defaultwidth="Large" />
        
       
        
    </flexipage:template>
            
</design:component>
Assunta NewellAssunta Newell
really very nice and creative template https://www.ariseportal.net/