Custom Lightning (Home)Page Layouts

Introduction

In order to accomplish a recent project, I had to develop a custom lightning page layout, or more specifically homepage layout. The default options that you have are pretty sparse (well, at least talking about homepage layouts, there’s only one), so if you want to do something cool for your users this will be a must. Luckily it’s not so difficult.

Before we start, if you’ve never built a lightning component before, you should start here. This guide is a little more accelerated, assuming you’re already somewhat familiar with lightning component development.

The Component

First off, your homepage layout is just going to be a new lightning component. So navigate to the developer console, and create a new lightning component (File > New > Lightning Component), and in the markup of the component itself, start here:

<aura:component implements="lightning:homeTemplate" description="My Custom Layout">

</aura:component>

Alright, now each “section” of the page layout is actually stored in an attribute:

<aura:attribute name="header" type="Aura.Component[]" />

<aura:attribute name="left_col" type="Aura.Component[]" />
<aura:attribute name="mid_col" type="Aura.Component[]" />
<aura:attribute name="right_col" type="Aura.Component[]" />

<aura:attribute name="footer" type="Aura.Component[]" />

Again, all of this goes within your component markup. I’ll post all of the code together at the end, but I want to continue piece-by-piece for now.

Now, the important and slightly more difficult part. You’ll need to create a lightning:layout with lightning:layoutItem. The way you create and nest these various items will determine how your page actually is physically structured. Let’s start really simple. I want a header which spans the entire width of the browser.

<div>
  <lightning:layout>
    <lightning:layoutItem size="12" class="">
    {!v.header}
    </lightning:layoutItem>
  </lightning:layout>

  <!-- more markup here, soon -->

</div>

Great. See size="12"? By default we will have a 12 column layout as has become pretty standard in CSS frameworks these days, and by setting our size attribute, we can decide how many of those columns this component will take up. Also notice {!v.head} inside of the lightning:layoutItem. This references the aura:attribute we defined earlier which had the type Aura.Component[] (an array of lightning components).

Now let’s get a little more complex.

<div>

  <!-- Row 1 -->
  <lightning:layout>
  
      <lightning:layoutItem size="12" class="">
        {!v.header}
      </lightning:layoutItem>

  </lightning:layout>
  
  <!-- Row 2 -->
  <lightning:layout>
  
      <lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '12' }" class="">
        {!v.left_col}
      </lightning:layoutItem>

      <lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '12' }" class="">
        {!v.mid_col}
      </lightning:layoutItem>
      
      <lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '12' }" class="">
        {!v.right_col}
      </lightning:layoutItem>
      
  </lightning:layout>

  <!-- Row 3 -->
  <lightning:layout>
  
      <lightning:layoutItem size="12" class="">
        {!v.footer}
      </lightning:layoutItem>

  </lightning:layout>
  

</div>

Let’s try to explain what’s going on here, and what it will produce before we see it visually. Each lightning:layout block represents a row, and each lightning:layoutItem represents a column. Within the size attribute, we can use $Browser.isDesktop ? [columns_if_true] : [columns_if_false]to make this layout responsive. In this case, the columns will take up 4 columns on a desktop, or 12 on mobile (either 33% on desktop, or 100% on mobile.

On the next page, we’ll actually see our layout in action. But there’s still one more step that requires a tiny bit of code.

Add comment

Recent Posts

Categories