You need to sign in to do that
Don't have an account?
Cory Iler
Custom Home Page Template with Header
I am looking at creating a custom home page template in Lighting but I can't seem to get a header added into this. I currently have the three regions displaying fine but for some reason am a bit lost on how to add a header that spans all three regions accross the top.
Here is my component markup:
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="region_header" type="Aura.Component[]" />
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column1}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column2}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column3}
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
And here is the design markup:
<design:component label="3 Column Page">
<flexipage:template >
<flexipage:region name="region_header" defaultWidth="Medium" />
<flexipage:region name="column1" defaultWidth="Medium" />
<flexipage:region name="column2" defaultWidth="Medium" />
<flexipage:region name="column3" defaultWidth="Medium" />
</flexipage:template>
</design:component>
Here is my component markup:
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="region_header" type="Aura.Component[]" />
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column1}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column2}
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
{!v.column3}
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
And here is the design markup:
<design:component label="3 Column Page">
<flexipage:template >
<flexipage:region name="region_header" defaultWidth="Medium" />
<flexipage:region name="column1" defaultWidth="Medium" />
<flexipage:region name="column2" defaultWidth="Medium" />
<flexipage:region name="column3" defaultWidth="Medium" />
</flexipage:template>
</design:component>
Add this before your first lightning:layout line, after the first div
<div class="slds-m-bottom_small">{!v.region_header}</div>