You need to sign in to do that
Don't have an account?
Thomas 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.
<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>
<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>
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----
https://salesforce.stackexchange.com/questions/206072/sticky-header-in-custom-lightning-page-template-component