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>

August 20, 2018
·
Like
0
·
Follow
1

Best Answer chosen by HNT_Neo

Alain 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.

August 21, 2018
·
Like
1
·
Dislike
0

HNT_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>

August 20, 2018
·
Like
0
·
Dislike
0

This was selected as the best answer

HNT_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?

August 21, 2018
·
Like
0
·
Dislike
0

Alain 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.

August 21, 2018
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

How to create a 9 box using the lightning:appHomeTemplate

All Answers

You need to sign in to do that.