Salesforce Winter 18 feature to customize Lightning home page layout

For a long time I have been struggling about how to make Lightning Home Page to have only one column. 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[]" /> 

    <div>
        <lightning:layout horizontalAlign="spread">
            {!v.main}
        </lightning:layout>
    </div>
</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.

This entry was posted in salesforce, Uncategorized and tagged , , , , , , . Bookmark the permalink.

14 Responses to Salesforce Winter 18 feature to customize Lightning home page layout

  1. Matt Peyton says:

    Good afternoon,

    I tried this code and it seemed to work, but the resulting page is limited to 585 px wide. I have tried messing with the CSS, but then the design is not responsive to width.

    It looks like it’s grabbing the wrong Render Facet. Do you have any idea what the issue might be?

    Thank you!
    Matt

    • patlatus says:

      Sounds strange, since in my case I was able to set the width to 100%. Did you set anywhere restristion to have width of 585 px? Alternatively you might have set some overwhelming margin or padding on some of containers elements

      • Matt Peyton says:

        That is strange. I only have a dashboard on the page, so I don’t think margins or padding is the issue. (I also poked around for something off and didn’t find anything.) Did you do something to set the width in addition to the code you have above? I simply created that component, and drug the dashboard onto it and got that strange result.

      • Matt Peyton says:

        Just if you run into something like this in the future, the issue seems to be that I need to place an element above the dashboard to have it stretch the whole width. However, it can’t be just any element (visualforce pages and rich text don’t work, but assistant and tasks does). Anyway, thank you for posting this code, it was a huge help.

      • Matt Peyton says:

        Now I’m seeing that it only keeps the width of the top object for some reason. Very weird behavior. ¯\_(ツ)_/¯

  2. Lucy says:

    Hi, this is a really useful piece thank you. i’m having the same problem as Matt in that the column only fills half the page and whatever other elements I put on top of it, it remains the same width. Do you have any thoughts on why this could be happening?

    • patlatus says:

      Hi, did you read about Matt’s comment above? He says: “Just if you run into something like this in the future, the issue seems to be that I need to place an element above the dashboard to have it stretch the whole width. However, it can’t be just any element (visualforce pages and rich text don’t work, but assistant and tasks does). “

  3. Did anyone ever figure this out? My CEO wants a Lightning homepage with just his main pipeline dashboard as the only component. But when I try this solution I get a narrow column that is left justified even if I put another component like Tasks above it.

  4. I seem to have the same issue as Michael Paulk.
    I am not a lightning developer, so I can’t seem to know how to fix it.
    I am using the component to display a dashboard so perhaps it is why?
    Thank you for looking into this for us, patlatus.

    • Update: I tried adding a report like the others above and it displayed at the regular width (whatever the report graph width is) so no dice. By using a wider report I do not get a wider display.
      I did as suggested by adding a task element and it worked.
      I then removed the report elements, adding the dashboard back under the task element and the width went back to about 33%.
      Playing around with dashboard components (having a full width report on top) the width of the home page did not bulge farther than 33%. It seems those component areas have their owned max width and overrides your code.

  5. Jason Carrigan says:

    I was also getting the column squished to the left when trying to show a dashboard. I changed the component to use regular and slds style tags rather than the and it fixed the problem for me.

    In the component try replacing

    {!v.main}

    with

    {!v.main}

  6. Hi All,

    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

    {!v.main}

    And the design is as below

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

  7. Seems like code snippet is wiped out from comment here, so sharing a link where you can see the code which worked for me.

    https://salesforce.stackexchange.com/a/255147/29110

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s