Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DlinnDlinn 

Page Template: Pinned Header and Right Sidebar

I see that there is a Console page template for Console: Pinned Header and Left Sidebar, but not one for Console: Pinned Header and Right Sidebar.  I was attempting to create my own component, but after much searching and reviewing of documentation, I haven't found anything on pinning columns/headers in a custom template component.   

Has anyone had any luck with this, or is there an example available anywhere that may have some documentation on how they accomplished this with their default console templates?  Thanks.
Sanjay Bhati 95Sanjay Bhati 95
Hi Dlinn,

You can create your custom page template.Here is component code for header and right pinned.

1. pageTemplate.cmp 
<aura:component implements="lightning:appHomeTemplate" description="This is custom template">
    <aura:attribute name="header" type="Aura.Component[]" />
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    <aura:attribute name="isSidebarCollapsed" type="Boolean" access="PRIVATE" default="false" />
    <div>
        <div>{!v.header}</div>
        <lightning:layout class="slds-m-top_medium">
            <lightning:layoutItem flexibility="auto">
                {!v.left}
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="no-flex">
                <lightning:buttonIcon onclick ="{!c.toggleSection}"
                                      class="design-allow-interaction toggle slds-p-around_xxx-small slds-m-horizontal_xx-small"
                                      variant="border-filled"
                                      iconName="{! v.isSidebarCollapsed ? 'utility:chevronleft' : 'utility:chevronright' }" 
                                      alternativeText="{! v.isSidebarCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar' }" />
            </lightning:layoutItem>
            <lightning:layoutItem class="{! v.isSidebarCollapsed ? ' slds-hide' : '' }" size="4">
                {!v.right}
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    
</aura:component>
2.pageTemplate.controller 
({
    toggleSection : function(component, event, helper) {
        component.set('v.isSidebarCollapsed', !component.get('v.isSidebarCollapsed'));
    }
})

3. pageTemplate.design 
<design:component label="Two Region Custom App Page Template">
    <flexipage:template >
        <flexipage:region name="header" label="Header Region" defaultWidth="LARGE"></flexipage:region>
        <flexipage:region name="left" label="Left Region" defaultWidth="MEDIUM" />
        <flexipage:region name="right" label="Right Region" defaultWidth="SMALL" />
       </flexipage:template>
</design:component>