1

Is it possible to create a Single column lightning home page? On Lightning Home page creation, the only option is the standard two column - but on individual pages you can choose single column.

I'd like to remove the right hand column from the home page to create more space. Anyone know if this is possible (even through a lighnting 'hack')?

1

I also tried to do this with no success, I think that it is not possible to edit a standard lightning process page like that. We gave up on this and created a complete custom "Lightning" process VF page with SLDS styling and overridden the standard one, possibilities at this kind of approach are limitless.

I hope that you find a better solution for this.

edit: you can try dragging the component one block up like this: enter image description here

  • Thanks Ziga, can I ask what classes you used on your divs to make the VF page expand over the right column? – McD Mar 13 '17 at 22:19
3

Looks like there is an option in Winter'18 release.

You need to create the following component HomePageSingleColumnTemplate with the following code

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

Also you have to specify design for it

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

You might or might not specify an icon for it, you can read interface description here and advanced configuration guide here about how to specify an icon or image for your template.

Then you just need to create a new Lightning Home page based on created layout and you will see one column.

Update: people suggest to remove

<div>
    <lightning:layout horizontalAlign="spread">

    </lightning:layout>
</div>

elements from component to avoid shrinkage.

  • I tried this but the column was narrow and squished to the left when showing a dashboard. Instead of the lightning:layout I used regular divs with slds-grid and slds-col and it worked great. – Jason Mar 22 at 18:59
0

I also came across it today and faced same issue, the solution which worked for me is to avoid using in component, the “lightning:layout” is something which causing issue here.

Now my component is look like below

<aura:component implements="lightning:homeTemplate">
<aura:attribute name="main" type="Aura.Component[]" />
<div class="container">
    <div class="slds-grid slds-wrap">
        <div class="slds-size--1-of-1">
                {!v.main}
        </div>
    </div>
</div>

And the design is as below

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

Its worked for me, hope it will help you guys as well!!

0

I've added some details if you'd like this template option to look more like the standard options when selecting. Here is my complete code:

Component:

<aura:component implements="lightning:homeTemplate" description="A single region whose width adjusts to fit the screen.">
    <aura:attribute name="main" type="Aura.Component[]" /> 
    {!v.main}    
</aura:component>

Design:

<design:component label="One Region">
    <flexipage:template >
        <flexipage:region name="main" defaultWidth="Xlarge">
        </flexipage:region>
    </flexipage:template>
</design:component>

SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="200px" height="155px" viewBox="0 0 200 155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
    <title>App page - One Column 206 v1</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M53.6200092,23.6328001 C54.6870456,25.3030294 61.1516345,26.6141854 61.1516345,26.6141854 C61.1516345,26.6141854 62.8577362,27.8655446 56.549609,27.8655421 C52.1085854,27.8655409 38.4394881,27.8655414 30.7368867,27.8655418 C23.0342852,27.8655414 9.36518877,27.8655409 4.9241654,27.8655421 C-1.38396179,27.8655446 0.322139816,26.6141854 0.322139816,26.6141854 C0.322139816,26.6141854 6.78672873,25.3030294 7.85376516,23.6328001 C8.92080159,21.9625708 10.7774351,0.0700229554 10.7774351,0.0700229554 L50.6963392,0.0700229554 C50.6963392,0.0700229554 52.5529728,21.9625708 53.6200092,23.6328001 Z" id="path-1"></path>
        <rect id="path-3" x="0" y="0.325283145" width="202.649351" height="124.815789" rx="3.90649351"></rect>
    </defs>
    <g id="Template-images-export" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-181.000000, -33.000000)">
            <g id="App-page---One-Column-206-v1" transform="translate(181.000000, 33.000000)">
                <g id="Desktop-Copy">
                    <g id="stand" transform="translate(69.600000, 124.022980)">
                        <path d="M61.3571581,27.2523173 L61.3571581,28.0325353 C61.4227989,28.4026526 60.8517148,28.9859453 56.5452643,28.9859436 C52.1045826,28.9859424 38.4365375,28.9859429 30.7345291,28.9859433 C23.0325206,28.9859429 9.36447643,28.9859424 4.92379494,28.9859436 C0.617344472,28.9859453 0.0462603452,28.4026526 0.117364554,28.0325353 L0.111901139,27.2523173 L0.875114512,27.5925007 L60.5939447,27.5925007 L61.3571581,27.2523173 Z" id="standShadow" opacity="0.5"></path>
                        <path d="M61.3571581,26.9121338 L61.3571581,27.6923519 C61.4227989,28.0624692 60.8517148,28.6457618 56.5452643,28.6457602 C52.1045826,28.6457589 38.4365375,28.6457594 30.7345291,28.6457598 C23.0325206,28.6457594 9.36447643,28.6457589 4.92379494,28.6457602 C0.617344472,28.6457618 0.0462603452,28.0624692 0.117364554,27.6923519 L0.111901139,26.9121338 L0.875114512,27.2523173 L60.5939447,27.2523173 L61.3571581,26.9121338 Z" id="standBottom" fill="#C6C7CA"></path>
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <use fill="#D8D8D8" xlink:href="#path-1"></use>
                    </g>
                    <g id="screen" transform="translate(0.000000, 0.490506)">
                        <mask id="mask-4" fill="white">
                            <use xlink:href="#path-3"></use>
                        </mask>
                        <g id="outer">
                            <use fill-opacity="0.300158514" fill="#9B9B9B" xlink:href="#path-3"></use>
                            <use fill="#E1E1E1" xlink:href="#path-3"></use>
                        </g>
                        <g id="Today@2x" mask="url(#mask-4)" fill="#FFFFFF">
                            <g transform="translate(6.022511, 8.503831)" id="Mask">
                                <rect x="0.488311688" y="0.795136576" width="188.84371" height="105.236842"></rect>
                            </g>
                        </g>
                    </g>
                    <g id="Regions" transform="translate(8.634889, 11.911559)">
                        <rect id="Rectangle-3420-Copy-3" fill="#54698D" x="0.317492032" y="0.325283145" width="183.930736" height="100.342105"></rect>
                        <text id="1-copy-3" font-family="SalesforceSans-Bold, Salesforce Sans" font-size="9.76623377" font-weight="bold" fill="#FFFFFF">
                            <tspan x="89.3041587" y="53.9808683">1</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.