Advanced component layouts

Learn how to use the Layout container component to create more complex page layouts.

Overview

If you’re building a page that has many components, at some point you’ll want to control how those components are aligned, how much space are between components and other basic aspects of the layout. This is where the Layout container component is very useful. In this article, we’ll walk you through building a more complex version of the “Contacts tab” for the Accounts object.

Getting to know the Layout container component

Before we jump into a tutorial, let’s first take a look at the layout container component.

A close up of the page builder, showing the properties and children of a layout container component

The layout container has many properties that change the way that it renders child components.

Property Options Description
Direction
  • Vertical
  • Horizontal
 The direction of flow for child components
Distribute Depends on Direction:
  • Stretch
  • Left or Top
  • Center or Middle
  • Right or Bottom
 How the child components are distributed on the main axis of flow
Align
  • Start
  • Center
  • End
 How the child components are aligned on the main axis of flow
Wrap
  • Yes
  • No
 Allow child components to wrap to new lines
Gap
  • none
  • sm (small)
  • md (medium)
  • lg (large)
  • custom (number of pixels)
 The spacing between child components
Padding
  • none
  • sm (small)
  • md (medium)
  • lg (large)
  • custom (number of pixels)
 Internal padding of the layout container component
Background
  • Transparent
  • Gray
 The background of the container

Adding a “Create new” button to the Contact tab of an Account detail page

We showed you how to add a list of related contacts to an account page in a previous tutorial, if you haven’t added a Contacts tab to your account page, follow the instructions in that tutorial first!

In this tutorial we’ll enhance the tab to include a “Create new” button, so your users can create a new contact. We’ll use 2 layout containers to acheive our desired look and feel. We’ll use the first layout container to create 2 rows one for a header, the other for the related list. The second layout container will allow us to add one or more buttons to the header.

The following image outlines the basic structure we’re going to create.

A diagram of the basic structure of components, showing the nesting of layout containers, and child components

Open page builder for an account detail page

  1. Navigate the accounts list, https://<your-team>.my.skedulo.com/p/accounts
  2. Click on an account to open the detail view
  3. Open the page builder by clicking on the gear icon in the lower right of the screen

To acheive our desired layout, we’re going to use two layout containers, one nested inside the other.

  1. Click the pencil icon on the Contacts tab
  2. Change the Component from Related list to Layout container
  3. Set the Direction property to Vertical
  4. Expand the Display options properties group
  5. Set Size to Auto

If you don’t set the Size of this first layout container to “Auto”, it will default to “Full” and the header and the list will both take up %50 of the available height.

  1. In the Components section, click the + Component link to add a new child component to this container
  2. Set the Component label property to “Related contacts header”
  3. Set the Component property to Layout container
  4. Set the Direction property to Horizontal
  5. Set the Align property to End
  6. Set the Padding property to md or medium
  7. Click + Component link to add a child component
  8. Set the Component label property to “Create contact button”
  9. Set the Component property to Link button
  10. Click the + Optional property link, and add Label, Type and Path properties
  11. Set the Label property to “Create new”
  12. Set the Type property to “Primary”
  13. Set the Path property to “/p/contacts/create”
  14. Expand the Display options properties group
  15. Set Size to Auto
  16. Click Save to save changes to the “Create contact button”
  17. Click Save again to save change to the “Related contacts header”

Make sure your configuring the top level “Contacts” tab layout container.

  1. In the Components section, click the + Component link to add a new child component
  2. Set the Component label property to “Related contacts list”
  3. Set the Component property to Related list
  4. Set the Related list property to Contact
  5. Click Save to save changes to the “Related contacts list”
  6. Click Save again to save change to the “Contacts” tab
  7. Click Publish to make the changes available to all users

Your page should look like something like the image below.

A preview of the account detail page with a new “Contacts” tab showing only a “Create new” button aligned to the right of the page, and a related list of contact records

Notice the following:

  • The header is above the related list, this is because we set the top level layout container’s Direction property to “Vertical”, and the header is the first child component
  • The “Create new” button is aligned to the right, this is because the second level layout container’s Direction property is “Horizontal”, and the Distribute property to “Bottom”

Try clicking on the “Create new” button, it should navigate you to the page to create a new contact.

See also