Custom lightning template app page without title header — Admin can code too!
One if my team mate comes too see me the other day to integrate an Analytics dashboard in a Lightning app page.
The dashboard is wide and it will be the only component in the page.
I use the Lightning App Builder to build a page using the one region template and in less than 5 minutes, I got the result display in our app:
But, my team mate doesn’t want to display the title header added by default on top of the page.
Challenge accepted!
To do this, lets create a New custom template app page (in fact, it is a lightning component with AppHomeTemplate attributes).
(I’ve used AURA because it was simpler for me but a solution can also be found if you use LWC)
- Step 1: Create a static resource « NoHeader »:
Create a file named Noheader.css with the following content:
[app_flexipage-header_header-host] {
display: none;
}Import it as a static ressource:
- Step 2: Create a new Lightning component (Custom template App Page without Header) with the following code:
customtemplateapppagewithoutheader.cmp
<aura:component implements="lightning:appHomeTemplate" description="Lightning Experience app page template with one section but without standard header">
<aura:attribute name="firstLine" type="Aura.Component[]" />
<ltng:require styles="{!$Resource.NoHeader}"/>
<div>
<lightning:layout horizontalAlign="spread">
<lightning:layoutItem flexibility="grow" class="slds-p-around_small">
{!v.firstLine}
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>customtemplateapppagewithoutheader.design
<design:component label="Custom App Page without header">
<flexipage:template >
<flexipage:region name="firstLine" defaultWidth="LARGE" />
</flexipage:template>
</design:component>customtemplateapppagewithoutheader.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg3779" inkscape:version="0.92.2 (5c3e80d, 2017-08-06)" sodipodi:docname="Custom Home Page 2.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 153"
style="enable-background:new 0 0 200 153;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#C6C7CA;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#D8D8D8;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#9B9B9B;fill-opacity:0.3002;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#E1E1E1;}
.st5{filter:url(#Adobe_OpacityMaskFilter);}
.st6{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st7{mask:url(#mask-4_1_);}
.st8{fill-rule:evenodd;clip-rule:evenodd;fill:#54698D;}
</style>
<title id="title3742">Standard Home Page 204 v2</title>
<desc id="desc3744">Created with Sketch.</desc>
<g id="Template-images-export">
<g id="Standard-Home-Page-204-v1-Copy" transform="translate(-181.000000, -33.000000)">
<g id="Standard-Home-Page-204-v2" transform="translate(181.000000, 33.000000)">
<g id="stand" transform="translate(69.600000, 124.022980)">
<path id="standShadow" class="st0" d="M60.6,26.9v0.8c0.1,0.4-0.5,0.9-4.7,0.9c-4.4,0-17.9,0-25.5,0s-21.1,0-25.5,0
c-4.3,0-4.8-0.6-4.7-0.9l0-0.8l0.8,0.3h58.9L60.6,26.9z"/>
<path id="standBottom" class="st1" d="M60.6,26.6v0.8c0.1,0.4-0.5,0.9-4.7,0.9c-4.4,0-17.9,0-25.5,0s-21.1,0-25.5,0
c-4.3,0-4.8-0.6-4.7-0.9l0-0.8l0.8,0.3h58.9L60.6,26.6z"/>
<g id="use3755">
<path id="path-1_1_" class="st2" d="M52.9,23.3c1.1,1.6,7.4,2.9,7.4,2.9s1.7,1.2-4.5,1.2c-4.4,0-17.9,0-25.5,0
c-7.6,0-21.1,0-25.5,0c-6.2,0-4.5-1.2-4.5-1.2s6.4-1.3,7.4-2.9c1.1-1.6,2.9-23.3,2.9-23.3H50C50,0.1,51.9,21.7,52.9,23.3z"/>
</g>
</g>
<g id="screen" transform="translate(0.000000, 0.484177)">
<g id="outer">
<g id="use3761">
<path id="path-3_1_" class="st3" d="M3.9,0.5h192.3c2.1,0,3.9,1.7,3.9,3.9v115.9c0,2.1-1.7,3.9-3.9,3.9H3.9
c-2.1,0-3.9-1.7-3.9-3.9V4.3C0,2.2,1.7,0.5,3.9,0.5z"/>
</g>
<g id="use3763">
<path id="path-3_2_" class="st4" d="M3.9,0.5h192.3c2.1,0,3.9,1.7,3.9,3.9v115.9c0,2.1-1.7,3.9-3.9,3.9H3.9
c-2.1,0-3.9-1.7-3.9-3.9V4.3C0,2.2,1.7,0.5,3.9,0.5z"/>
</g>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="6.7" y="9.2" width="186.5" height="104.2">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="6.7" y="9.2" width="186.5" height="104.2" id="mask-4_1_">
<g id="use3758_1_" class="st5">
<path id="path-3_3_" class="st6" d="M3.9,0.5h192.3c2.1,0,3.9,1.7,3.9,3.9v115.9c0,2.1-1.7,3.9-3.9,3.9H3.9
c-2.1,0-3.9-1.7-3.9-3.9V4.3C0,2.2,1.7,0.5,3.9,0.5z"/>
</g>
</mask>
<g id="Today_x40_2x" class="st7">
<g id="Mask" transform="translate(6.746988, 9.199367)">
<path id="rect3766" class="st8" d="M1.8,0h182.9c1,0,1.8,0.8,1.8,1.8v100.7c0,1-0.8,1.8-1.8,1.8H1.8c-1,0-1.8-0.8-1.8-1.8V1.8
C0,0.8,0.8,0,1.8,0z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>- Step 3: Change the template used for the app page:
Open your page in the Lightning App Builder.
Next to the “Template” property, click the “Change” button and select the new template we’ve just created.
Click “Next” and then “Done”.
Finally, Save your page.
And voilà!
Less than 30 minutes later, I have the result wanted.
During this time, I’ve also explained to my friend what we just did and how :)
Warning: The css loaded impact all the others lightning custom apps you have in your org.
