You need to sign in to do that
Don't have an account?
Keith Patella
Communities Lightning: How to Display the Compact Header of the Citizen Template in a Custom Theme
All the examples for Salesforce show ways with the Napalli(Customer Support) Communities template to use the Search, Navigation, etc... items in a Custome Theme layout like here: https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_example_structure.htm
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
<div>
<div class="searchRegion">
{!v.search}
</div>
<div class="profileMenuRegion">
{!v.profileMenu}
</div>
<div class="navigation">
{!v.navBar}
</div>
<div class="newHeader">
{!v.newHeader}
</div>
<div class="mainContentArea">
{!v.body}
</div>
</div>
</aura:component>
We are using the Citizen Template and we want to create a CustomThemeLayout that uses the CompactHeader lightning component that is used on all our other pages. Is there a way to do this in my aura component with something like this.
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="compactHeader" type="Aura.Component[]" required="false"/>
<div>
<div class="compactHeader">
{!v.compactHeader}
</div>
<div class="mainContentArea">
{!v.body}
</div>
</div>
</aura:component>
Doing it this way just defines a section called "compactHeader" it doesn't actually drop in the compactHeader Temaplate, so we're trying to find out what the syntax is to do this.
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
<div>
<div class="searchRegion">
{!v.search}
</div>
<div class="profileMenuRegion">
{!v.profileMenu}
</div>
<div class="navigation">
{!v.navBar}
</div>
<div class="newHeader">
{!v.newHeader}
</div>
<div class="mainContentArea">
{!v.body}
</div>
</div>
</aura:component>
We are using the Citizen Template and we want to create a CustomThemeLayout that uses the CompactHeader lightning component that is used on all our other pages. Is there a way to do this in my aura component with something like this.
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="compactHeader" type="Aura.Component[]" required="false"/>
<div>
<div class="compactHeader">
{!v.compactHeader}
</div>
<div class="mainContentArea">
{!v.body}
</div>
</div>
</aura:component>
Doing it this way just defines a section called "compactHeader" it doesn't actually drop in the compactHeader Temaplate, so we're trying to find out what the syntax is to do this.
I wish SF would open up and share the code for these components - it'd be a great compliment to their ususally great documentation.