• Cory Iler
  • NEWBIE
  • 0 Points
  • Member since 2018

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 2
    Questions
  • 1
    Replies
I am looking at creating a custom home page template in Lighting but I can't seem to get a header added into this. I currently have the three regions displaying fine but for some reason am a bit lost on how to add a header that spans all three regions accross the top.

Here is my component markup:
<aura:component implements="lightning:homeTemplate" 
                description="A home page you always dreamed of, 3 columns." >
    <aura:attribute name="region_header" type="Aura.Component[]" />
    <aura:attribute name="column1" type="Aura.Component[]" />
    <aura:attribute name="column2" type="Aura.Component[]" />
    <aura:attribute name="column3" type="Aura.Component[]" />
    
    <div>
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">
                {!v.column1}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">         
                {!v.column2}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">
                {!v.column3}
            </lightning:layoutItem>
        </lightning:layout>
    </div> 
</aura:component>

And here is the design markup:
<design:component label="3 Column Page">
    <flexipage:template >
        <flexipage:region name="region_header"    defaultWidth="Medium" />
      <flexipage:region name="column1" defaultWidth="Medium" />
      <flexipage:region name="column2" defaultWidth="Medium" />
      <flexipage:region name="column3" defaultWidth="Medium" />
  </flexipage:template>
</design:component>
So I have a field called "Days Since Last Order." Pretty basic formula field:

TODAY() - LastOrderDate__C. This works perfect and gives me the days.

But what is happening is if the customer has never ordered it shows 0 as if they just ordered today. I need this field, if the LastOrderDate__c is null to display "NEVER" but if there is a value to display the number.
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
User-added image

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