0

I've created a custom lightning home page template. It mostly works in the sense that it has the desired layout and displays most components that are configured on it. However, when I drop a dashboard into it, only the title and link to the dashboard are displayed, not the contents of the dashboard.

When I drop this same dashboard into one of the standard home page templates, it displays the full contents of the dashboard.

Lightning Component code:

<aura:component implements="lightning:homeTemplate" access="global">
<aura:attribute name="topLeft" type="Aura.Component[]"/>
<aura:attribute name="topRght" type="Aura.Component[]"/>
<aura:attribute name="mainSection" type="Aura.Component[]"/>
<aura:attribute name="bottomLeft" type="Aura.Component[]"/>
<aura:attribute name="bottomRight" type="Aura.Component[]"/>
<aura:attribute name="sidebar" type="Aura.Component[]"/>

<div class="slds-grid slds-gutters_x-small slds-grid_pull-padded-x-small">
    <div class="slds-col slds-size_2-of-3">
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <span>{!v.topLeft}</span>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <span>{!v.topRght}</span>
            </div>
        </div>
        <div class="slds-col slds-size_1-of-1 slds-m-top_small">
            <span>{!v.mainSection}</span>
        </div>
        <div class="slds-grid slds-m-top_x_small" >
            <div class="slds-col slds-size_1-of-2">
                <span>{!v.bottomLeft}</span>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <span>{!v.bottomRight}</span>
            </div>
        </div>
    </div>
    <div class="slds-col slds-size_1-of-3">
        <span>{!v.sidebar}</span>
    </div>
</div>

Lightning Design Code:

<design:component label="Two Regions Above Main Region and Right Sidebar">
<flexipage:template>
    <flexipage:region name="topLeft" defaultWidth="SMALL">
        <flexipage:formfactor type="MEDIUM" width="SMALL"/>
    </flexipage:region>
    <flexipage:region name="topRght" defaultWidth="SMALL">
        <flexipage:formfactor type="MEDIUM" width="SMALL"/>
    </flexipage:region>
    <flexipage:region name="mainSection" defaultWidth="SMALL">
        <flexipage:formfactor type="MEDIUM" width="SMALL"/>
    </flexipage:region>
    <flexipage:region name="bottomLeft" defaultWidth="SMALL">
        <flexipage:formfactor type="MEDIUM" width="SMALL"/>
    </flexipage:region>
    <flexipage:region name="bottomRight" defaultWidth="SMALL">
        <flexipage:formfactor type="MEDIUM" width="SMALL"/>
    </flexipage:region>
    <flexipage:region name="sidebar" defaultWidth="SMALL">
        <flexipage:formfactor type="MEDIUM" width="SMALL"/>
    </flexipage:region>
</flexipage:template>

Suggestions?

Mike

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.