Awesome Admins Awesome Home Page

Ever wanted a home page that has three regions but the middle is a little larger for displaying important feeds or components? I created this to allow that. (it does involve code but, so you will need to use developer console or vs code etc to create this, but I promise it will be easy. ) 

Here is what the template layout will look like: 

Here is how you get it: 

First: Create new lightning component/aura component with this name: HomePageThreeColumnLargerMiddle

Second: Add this for to the component (.cmp) file: 

<aura:component implements="lightning:homeTemplate" description="Home Template Three Column w Larger Middle" access="global">    <aura:attribute name="header" type="Aura.Component[]" access="global"/>    <aura:attribute name="left" type="Aura.Component[]" access="global"/>    <aura:attribute name="center" type="Aura.Component[]" access="global"/>    <aura:attribute name="right" type="Aura.Component[]" access="global"/>    <div>        <div>{!v.header}</div>        <lightning:layout class="columns">            <lightning:layoutItem size="3" class="left">                {!v.left}            </lightning:layoutItem>            <lightning:layoutItem size="6" class="left" padding="horizontal-small">                {!v.center}            </lightning:layoutItem>            <lightning:layoutItem size="3" class="right">                {!v.right}            </lightning:layoutItem>        </lightning:layout>    </div>

Thrid: Add this to the .design file: 

<design:component label="Home Template Three Region Larger Center">    <flexipage:template >        <flexipage:region name="header" defaultWidth="LARGE" />        <flexipage:region name="left" defaultWidth="SMALL" />        <flexipage:region name="center" defaultWidth="MEDIUM" />        <flexipage:region name="right" defaultWidth="SMALL" />    </flexipage:template></design:component>

Fourth: Add this to the svg file

<svg width="200" height="152" viewBox="0 0 200 152" fill="none" xmlns="http://www.w3.org/2000/svg">	<path fill-rule="evenodd" clip-rule="evenodd" d="M130.155 150.104V150.874C130.22 151.239 129.656 151.815 125.406 151.815C121.023 151.815 107.534 151.815 99.9327 151.815C92.3314 151.815 78.842 151.815 74.4594 151.815C70.2093 151.815 69.6457 151.239 69.7158 150.874L69.7104 150.104L70.4637 150.439H129.402L130.155 150.104Z" fill="#C6C7CA"/>	<path fill-rule="evenodd" clip-rule="evenodd" d="M122.519 146.867C123.572 148.515 129.952 149.81 129.952 149.81C129.952 149.81 131.636 151.045 125.41 151.045C121.027 151.045 107.537 151.045 99.935 151.045C92.3331 151.045 78.8427 151.045 74.4598 151.045C68.2341 151.045 69.9179 149.81 69.9179 149.81C69.9179 149.81 76.298 148.515 77.3511 146.867C78.4042 145.218 80.2365 123.608 80.2365 123.608H119.634C119.634 123.608 121.466 145.218 122.519 146.867Z" fill="#D8D8D8"/>	<path d="M196.145 0.484177H3.85542C1.72613 0.484177 0 2.21031 0 4.3396V120.201C0 122.33 1.72613 124.056 3.85542 124.056H196.145C198.274 124.056 200 122.33 200 120.201V4.3396C200 2.21031 198.274 0.484177 196.145 0.484177Z" fill="#9B9B9B" fill-opacity="0.300159"/>	<path d="M196.145 0.484177H3.85542C1.72613 0.484177 0 2.21031 0 4.3396V120.201C0 122.33 1.72613 124.056 3.85542 124.056H196.145C198.274 124.056 200 122.33 200 120.201V4.3396C200 2.21031 198.274 0.484177 196.145 0.484177Z" fill="#E1E1E1"/>	<mask id="mask0_1_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="125">	<path d="M196.145 0.484177H3.85542C1.72613 0.484177 0 2.21031 0 4.3396V120.201C0 122.33 1.72613 124.056 3.85542 124.056H196.145C198.274 124.056 200 122.33 200 120.201V4.3396C200 2.21031 198.274 0.484177 196.145 0.484177Z" fill="white"/>	</mask>	<g mask="url(#mask0_1_4)">	<path fill-rule="evenodd" clip-rule="evenodd" d="M6.74699 9.19936V113.445H193.283V9.19936H6.74699Z" fill="white"/>	</g>	<path fill-rule="evenodd" clip-rule="evenodd" d="M10 35.1421H58V111.142H10V35.1421Z" fill="#54698D"/>	<path fill-rule="evenodd" clip-rule="evenodd" d="M144 35H191V111H144V35Z" fill="#54698D"/>	<path fill-rule="evenodd" clip-rule="evenodd" d="M61 35.1421H141V111.142H61V73.1421V35.1421Z" fill="#54698D"/>	<path fill-rule="evenodd" clip-rule="evenodd" d="M8.91557 12H190.916V33H8.91557V12Z" fill="#54698D"/></svg>

Save.

Here is what it should look like when selecting a new home page on the lightning app builder. 

Here is what your page could look like: 

Hope this helps someone that might like this.

- Collin

@* Salesforce Administrators *

#Lightning App Builder #Salesforce Admin #AwesomeAdmins #Sales Cloud #Financial Services Cloud #Pagelayouts #Lighting App Builder #Template Design