+ Start a Discussion
Thomas AndrioliThomas Andrioli 

Making a custom page layout template with a pinnend componend.

I want to make my own Custom Page Layout Template for my Account page.
The layout is already how I want it, it' s nothing special.
But now I want the top component / Header to be pinned just like the standard one with a Pinned header and 3 Columns.

Here is the code that I used to make the Custom Page Layout.
 
----Accounts.cmp----

<aura:component implements="lightning:recordHomeTemplate" description="One header with 2 column's. The left one is 4 and right is 8">
    
    <aura:attribute name="header" type="Aura.Component[]"/>
    <aura:attribute name="left" type="Aura.Component[]"/>
    <aura:attribute name="right" type="Aura.Component[]"/>

    <div>
            <Lightning:Layout >
                <Lightning:layoutItem size="12" padding="around-small">
                    {!v.header}
                </Lightning:layoutItem>
            </Lightning:Layout>
                        
            <Lightning:Layout >
                <Lightning:layoutItem size="4" padding="horizontal-small">
                    {!v.left}
                </Lightning:layoutItem>
                
                <Lightning:layoutItem size="8" padding="horizontal-small">
                    {!v.right}
                </Lightning:layoutItem>
            </Lightning:Layout>      
    </div>
</aura:component>
----Accounts.cmp----
 
----Accounts.Design----

<design:component >
    <flexipage:template >
        <flexipage:region name="header" defaultWidth="Medium"> 
        </flexipage:region>
        
        <flexipage:region name="left" defaultWidth="Medium"> 
        </flexipage:region>
        
        <flexipage:region name="right" defaultWidth="Medium"> 
        </flexipage:region>        

    </flexipage:template>
</design:component>
----Accounts.Design----

 
Eric Smith 9Eric Smith 9
I had good results trying this technique:

https://salesforce.stackexchange.com/questions/206072/sticky-header-in-custom-lightning-page-template-component