Custom lightning template record page with collapsing region — Admin can code too!

5 min readJan 2, 2020

Beginning of 2018, when I’ve started to study the move to lightning in my main client, we had a business requirement saying that the record pages should have a collapsible side bar.

We were novice with custom lightning template pages but we decided to make a proof of concept with one if my favorite developer (Lukasz, if you read this, this is for you :). Victor, you are also one if my fav but we didn’t have the chance to work together on this topic ;-) ).

Where I was? Ah yes, the PoC!

After some times, the result was good for end users but not easy to configure for an admin and to maintain for a developer.
In parallel, the business had changed his mind and did not want this requirement for the move to lightning but probably later.

End of 2019, when I was searching a solution described in my previous article, I’ve found something directly in the Salesforce developper blog site: Making a Record page with collapsing regions written by Heather Dykstra.

Lets try it by creating a New custom template record page and use it for the account record page.

Step 1: Create a new Lightning component (Custom Record Template Page with Collapsing Region) with the following code:

CustomRecordTemplatePagewithCollapsingRegion.cmp

<aura:component implements="lightning:recordHomeTemplate" description="Full-width header above a main column and collapsible right sidebar."><aura:attribute name="header" type="Aura.Component[]" description="Header region"/>
    <aura:attribute name="main" type="Aura.Component[]" description="Main region"/>
    <aura:attribute name="sidebar" type="Aura.Component[]" description="Collapsible sidebar region"/><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.main}
            </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.sidebar}
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

CustomRecordTemplatePagewithCollapsingRegionController.js

({
    toggleSection : function(component, event, helper) {
        component.set('v.isSidebarCollapsed', !component.get('v.isSidebarCollapsed'));
    }
})

CustomRecordTemplatePagewithCollapsingRegion.design

<design:component label="Header and Collapsible Right Sidebar">
    <flexipage:template>
        <flexipage:region name="header" defaultWidth="LARGE" />
        <flexipage:region name="main" defaultWidth="MEDIUM" />
        <flexipage:region name="sidebar" defaultWidth="SMALL" />
    </flexipage:template>
</design:component>

CustomRecordTemplatePagewithCollapsingRegion.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 565 153" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Full-width header above a main column and collapsible right sidebar.</title>
<desc>Created with Sketch.</desc>
<defs>
<path id="d" d="m52.919 23.328c1.0531 1.6487 7.4332 2.9429 7.4332 2.9429s1.6838 1.2352-4.5419 1.2352c-4.383-1.2e-6 -17.873-7e-7 -25.475-3e-7 -7.6019-4e-7 -21.092-9e-7 -25.475 3e-7 -6.2257 2.5e-6 -4.5419-1.2352-4.5419-1.2352s6.3801-1.2942 7.4332-2.9429c1.0531-1.6487 2.8854-23.259 2.8854-23.259h39.397s1.8324 21.61 2.8854 23.259z"/>
<rect id="b" y=".48418" width="200" height="123.57" rx="3.8554"/>
<path id="c" d="m52.919 23.328c1.0531 1.6487 7.4332 2.9429 7.4332 2.9429s1.6838 1.2352-4.5419 1.2352c-4.383-1.2e-6 -17.873-7e-7 -25.475-3e-7 -7.6019-4e-7 -21.092-9e-7 -25.475 3e-7 -6.2257 2.5e-6 -4.5419-1.2352-4.5419-1.2352s6.3801-1.2942 7.4332-2.9429c1.0531-1.6487 2.8854-23.259 2.8854-23.259h39.397s1.8324 21.61 2.8854 23.259z"/>
<rect id="a" y=".48418" width="200" height="123.57" rx="3.8554"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(-1 -64)">
<g transform="translate(58 63)">
<g transform="translate(69.6 124.02)">
<path d="m60.555 26.901v0.77015c0.064783 0.36534-0.49884 0.94111-4.749 0.94111-4.3826-1.2e-6 -17.872-7e-7 -25.473-3e-7 -7.6013-4e-7 -21.091-9e-7 -25.473 3e-7 -4.2501 1.7e-6 -4.8138-0.57576-4.7436-0.94111l-0.005392-0.77015 0.75324 0.33579h58.938l0.75324-0.33579z" opacity=".5"/>
<path d="m60.555 26.565v0.77015c0.064783 0.36534-0.49884 0.94111-4.749 0.94111-4.3826-1.3e-6 -17.872-8e-7 -25.473-4e-7 -7.6013-4e-7 -21.091-9e-7 -25.473 4e-7 -4.2501 1.6e-6 -4.8138-0.57576-4.7436-0.94111l-0.005392-0.77015 0.75324 0.33579h58.938l0.75324-0.33579z" fill="#C6C7CA"/>
<mask fill="white">
<use xlink:href="#d"/>
</mask>
<use fill="#D8D8D8" xlink:href="#d"/>
</g>
<g transform="translate(0 .48418)">
<mask id="f" fill="white">
<use xlink:href="#b"/>
</mask>
<use fill="#9B9B9B" fill-opacity=".30016" xlink:href="#b"/>
<use fill="#E1E1E1" xlink:href="#b"/>
<g fill="#fff" mask="url(#f)">
<g transform="translate(6.747 9.1994)">
<rect width="186.54" height="104.25"/>
</g>
</g>
</g>
<g transform="translate(6.9156 9.3421)">
<rect y=".32109" width="186.35" height="20.132" fill="#54698D"/>
<rect x="4.8193" y="24.963" width="130.36" height="74.024" fill="#54698D"/>
<rect x="140.56" y="24.963" width="40.562" height="74.024" fill="#54698D"/>
<rect x="135" y="25" width="8" height="74.024" fill="#9FAAB5"/>
</g>
<g transform="translate(249)">
<g transform="translate(69.6 124.02)">
<path d="m60.555 26.901v0.77015c0.064783 0.36534-0.49884 0.94111-4.749 0.94111-4.3826-1.2e-6 -17.872-7e-7 -25.473-3e-7 -7.6013-4e-7 -21.091-9e-7 -25.473 3e-7 -4.2501 1.7e-6 -4.8138-0.57576-4.7436-0.94111l-0.005392-0.77015 0.75324 0.33579h58.938l0.75324-0.33579z" opacity=".5"/>
<path d="m60.555 26.565v0.77015c0.064783 0.36534-0.49884 0.94111-4.749 0.94111-4.3826-1.3e-6 -17.872-8e-7 -25.473-4e-7 -7.6013-4e-7 -21.091-9e-7 -25.473 4e-7 -4.2501 1.6e-6 -4.8138-0.57576-4.7436-0.94111l-0.005392-0.77015 0.75324 0.33579h58.938l0.75324-0.33579z" fill="#C6C7CA"/>
<mask fill="white">
<use xlink:href="#c"/>
</mask>
<use fill="#D8D8D8" xlink:href="#c"/>
</g>
<g transform="translate(0 .48418)">
<mask id="e" fill="white">
<use xlink:href="#a"/>
</mask>
<use fill="#9B9B9B" fill-opacity=".30016" xlink:href="#a"/>
<use fill="#E1E1E1" xlink:href="#a"/>
<g fill="#fff" mask="url(#e)">
<g transform="translate(6.747 9.1994)">
<rect width="186.54" height="104.25"/>
</g>
</g>
</g>
<g transform="translate(6.9156 9.3421)">
<rect y=".32109" width="186.35" height="20.132" fill="#54698D"/>
<rect x="4.8193" y="24.963" width="175.18" height="74.024" fill="#54698D"/>
<g transform="translate(178.28 24.998)">
<rect x=".084426" y="-2.8422e-14" width="8" height="74.024" fill="#9FAAB5"/>
<path transform="translate(3.5 38.014) rotate(180) translate(-3.5 -38.014)" d="m5.1056 38.461l-3.382 1.691c-0.24699 0.12349-0.54733 0.023382-0.67082-0.22361-0.034714-0.069428-0.052786-0.14598-0.052786-0.22361v-3.382c0-0.27614 0.22386-0.5 0.5-0.5 0.077623 0 0.15418 0.018073 0.22361 0.052786l3.382 1.691c0.24699 0.12349 0.3471 0.42383 0.22361 0.67082-0.048382 0.096764-0.12684 0.17522-0.22361 0.22361z" fill="#fff"/>
</g>
</g>
</g>
</g>
<path d="m205.52 135.8l-3.382 1.691c-0.24699 0.12349-0.54733 0.023382-0.67082-0.22361-0.034714-0.069428-0.052787-0.14598-0.052787-0.22361v-3.382c0-0.27614 0.22386-0.5 0.5-0.5 0.077623 0 0.15418 0.018073 0.22361 0.052787l3.382 1.691c0.24699 0.12349 0.3471 0.42383 0.22361 0.67082-0.048382 0.096764-0.12684 0.17522-0.22361 0.22361z" fill="#fff"/>
</g>
</g>
</svg>