Skip to main content
Topics#Lightning ExperienceJonh Smith's Question
Jonh Smith (HNT LLC) asked in #Lightning Experience
Aug 19, 2018, 6:45 AM

Can I create a 3 column Lightning homepage layout?

I've managed to create a lightning homepage component with 1 column using the below component, style, and design elements. If I re-use the {!v.main} in the component page more than once, I receive an error. 

I want to be able to create 3 horizontal sections as shown in the last image below. Is it possible? 

COMPONENT
<aura:component implements="lightning:homeTemplate">
    <aura:attribute name="main" type="Aura.Component[]" /> 
    <div>
        <lightning:layout horizontalAlign="spread">
            {!v.main}
        </lightning:layout>
    </div>
</aura:component>

DESIGN

<flexipage:template >
        <flexipage:region name="main" defaultWidth="Xlarge">
        </flexipage:region>
    </flexipage:template>

SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="⌗2A739E"/>
		<path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="⌗FFFFFF"/>
	</g>
</svg>

This is the error I receive

Can I create a 3 column Lightning homepage layout?

This is the layout I can render but doesn't work if I add components to it

User-added image
2 answers
  1. Alain Cabon (Air France)
    Aug 19, 2018, 10:21 PM
    Hi,

    <lightning:layout >  and  <lightning:layoutitem> are not mandatory for a template.

    Just use  <div class="slds-grid slds-wrap">, it is sufficient

    and you have many samples here: https://www.lightningdesignsystem.com/utilities/grid/

    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="My Two 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>

    Hi,<lightning:layout > and <lightning:layoutitem> are not mandatory for a template.Just use <div class=, it is sufficientand you have many samples here: https://www." style="display: block;" />

     
Write an answer...
0/9000