function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Keith PatellaKeith 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.
David Green (PM)David Green (PM)
Hi Keith. Today the "theme components" that makeup our pre-built themes (ex: what you see in Citizen) aren't available as standalone entities that could be referenced by another Custom Theme Layout. Do you mind incluuding some screenshots of your current pages and what you're looking to achieve?
Matt Phillips 6Matt Phillips 6
Not sure if you ever got your answer, but I created a layout with no attributes and pulled a clue from the error message. I think you're looking for the 'themeHeader'. Or maybe it's different depending on which theme you're using (I'm using Jepson). This should be documented! 
<aura:component implements="forceCommunity:themeLayout" access="global" description="Custom Wide Layout">
    <aura:attribute name="themeHeader" type="Aura.Component[]" required="false"/>

    <div class="themeHeader">
        {!v.themeHeader}
    </div>
    <div class="mainContentArea">
        {!v.body}
    </div>
</aura:component>

I wish SF would open up and share the code for these components - it'd be a great compliment to their ususally great documentation.
Jack Volkov 9Jack Volkov 9
<aura:attribute name="themeHeader" type="Aura.Component[]" required="false"/>
This is the correct attribute. Thanks Matt!