+ Start a Discussion
HNT_NeoHNT_Neo 

How to create a 9 box using the lightning:appHomeTemplate

I want the ability to create a 9 box type box like the below using the Lightning Builder, is this possible? 

Component
<aura:component implements="lightning:homeTemplate" access="global" >
    <aura:attribute name="center" type="Aura.Component[]" />
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right}</span>
        </div>        
    </div>
</aura:component>

Design
<design:component label="Three column Page">
    <flexipage:template>
        
        <flexipage:region name="left" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
               
        <flexipage:region name="right" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
    </flexipage:template>
</design:component>


User-added image
Best Answer chosen by HNT_Neo
Alain CabonAlain Cabon
Hi,

There is a strange error indeed when you change all the names of the regions together from an existing template already saved (even not used).

The code below is not optimized (could be shorter probably) but it works.

COMPONENT
<aura:component implements="lightning:homeTemplate" access="global" >
    <aura:attribute name="center" type="Aura.Component[]" />
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    
    <aura:attribute name="center1" type="Aura.Component[]" />
    <aura:attribute name="left1" type="Aura.Component[]" />
    <aura:attribute name="right1" type="Aura.Component[]" />
    
    <aura:attribute name="center2" type="Aura.Component[]" />
    <aura:attribute name="left2" type="Aura.Component[]" />
    <aura:attribute name="right2" type="Aura.Component[]" />
    
    
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right}</span>
        </div> 
        
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left1}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center1}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right1}</span>
        </div> 
        
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left2}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center2}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right2}</span>
        </div> 
        
    </div>
</aura:component>

DESIGN
 
<design:component label="My Three column Page">
    <flexipage:template>
        
        <flexipage:region name="left" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="left1" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center1" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right1" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="left2" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center2" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right2" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>      
        
    </flexipage:template>
</design:component>

The trick is to keep the existing template and you add the attrributes in the components first before modifying the code of desing at the end.


User-added image
 

All Answers

HNT_NeoHNT_Neo
Here's what I came up with, but only shows 3 rows. 
 
<aura:component implements="lightning:appHomeTemplate" access="global" >
 
    <aura:attribute name="center" type="Aura.Component[]" />
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    
    <div class="slds-grid slds-wrap ">
        
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left}</span>
        </div>
        
        <div class="slds-col slds-p-left_small slds-size_1-of-3">
            <span>{!v.center}</span>
        </div>
        
        <div class="slds-col slds-p-left_small slds-p-bottom_medium slds-size_1-of-3">
            <span>{!v.right}</span>
        </div>
        
    </div>

</aura:component>

 
Alain CabonAlain Cabon
Hi,

There is a strange error indeed when you change all the names of the regions together from an existing template already saved (even not used).

The code below is not optimized (could be shorter probably) but it works.

COMPONENT
<aura:component implements="lightning:homeTemplate" access="global" >
    <aura:attribute name="center" type="Aura.Component[]" />
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    
    <aura:attribute name="center1" type="Aura.Component[]" />
    <aura:attribute name="left1" type="Aura.Component[]" />
    <aura:attribute name="right1" type="Aura.Component[]" />
    
    <aura:attribute name="center2" type="Aura.Component[]" />
    <aura:attribute name="left2" type="Aura.Component[]" />
    <aura:attribute name="right2" type="Aura.Component[]" />
    
    
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right}</span>
        </div> 
        
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left1}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center1}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right1}</span>
        </div> 
        
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.left2}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.center2}</span>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <span>{!v.right2}</span>
        </div> 
        
    </div>
</aura:component>

DESIGN
 
<design:component label="My Three column Page">
    <flexipage:template>
        
        <flexipage:region name="left" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="left1" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center1" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right1" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="left2" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="center2" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right2" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>      
        
    </flexipage:template>
</design:component>

The trick is to keep the existing template and you add the attrributes in the components first before modifying the code of desing at the end.


User-added image
 
This was selected as the best answer
HNT_NeoHNT_Neo
You're correct! If you somehow mistype and save the component, it will not allow you to save. I just delete the component and start over (pasting in the correct code though) and it works.

Here's what I created using the lightning:icons and grid info you provided. (Still needs a little formatting to the padding right but its getting closer). 

Now, the next trick is to make the icons call the appropriate page; Recent Opportunities, Recent Leads,etc. 

https://developer.salesforce.com/docs/atlas.en-us.salesforce1.meta/salesforce1/salesforce1_dev_jsapi_sforce_one.htm

I'll be referencing this site to find the answer. 

Have you tried this before? 

 User-added image
 
Alain CabonAlain Cabon
Hi,

No, I didn't try it before. You could create a new question for the mobile section here.
I am not a mobile specialist (just some trailhead projects) but I need to improve my skills for this kind of development soon.