Layout

Last modified: June 23, 2023

1 Introduction

Layouts specify what comes where. Each page is based on a layout. The layout contains widgets and structures that return on every page based on that layout. For example, it is common to put a menu bar widget in a layout so that the menu is visible on all pages.

A layout consists of content and placeholders. The content is everything that should be present in every page that uses the layout, from navigation bars to sign-out buttons. Placeholders are empty areas that later form the canvas for any pages that make use of the layout. The layout content remains the same in every page, but the placeholders cover what is unique to every individual page.

Layouts can be based on other layouts, in which case the generic layout is referred to as the primary layout. If a layout has a primary layout, it can use the placeholders defined in the primary layout to create a more specialized configuration. If a page is based on this specialized layout, it makes use of the placeholders defined in the new layout, ignoring those of the primary layout. This chain can be as long as is necessary, with a generic layout used throughout the app as a primary layout for a more specific data input layout which is, in turn, used as a primary layout for a specialized edit user layout.

When opening a new page in the browser, the content found in the layouts is not reloaded if the layout is re-used by the new page. That is, if a user transitions from page A to page B, both of which use layout X, the placeholder content is refreshed, but the layout content is unaffected. This allows for navigation between pages without losing valuable input or performing a costly refresh on elements that do not require one. Example scenarios include a tab container that does not require the user to select the correct tab every time a new page is opened, or a sidebar menu with user input that should not be cleared after every single refresh.

2 Properties Pane

The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Layout properties consist of the following sections:

Properties:

Styling:

3 Properties

3.1 General Section

3.1.1 Platform

Platform can only be set when a layout is created.

Dialog for adding a new layout

The values for the platform property are:

  • Web (default) – these layouts are used for pages which are going to be displayed in a browser or web app
  • Native – these layouts are used for pages which are going to be displayed in a native mobile app

For existing layouts, the value is read-only.

3.1.2 Master Layout

Master layout specifies a layout on which this layout is based. If no primary layout is specified, the layout contains a single widget (for example, a scroll container) that defines the structure of pages based on this layout. If a primary layout is specified, this layout fills the gaps defined by the primary layout. You can introduce new gaps in this layout by using placeholders.

3.1.3 Layout Type

The layout type, determines the purpose of the layout and how a page using the layout is opened.

3.1.3.1 Web Layout Types
Layout Type Description
Responsive Pages that will work fine on all types of devices.
Tablet specific Pages to be displayed on a tablet because the responsive option does not provide a good user interface on a tablet.
Phone specific Pages to be displayed on a phone because the responsive option does not provide a good user interface on a phone.
Modal pop-up Pages that appear as modal pop-up windows.
Pop-up Pages that appear as modeless pop-up windows.
3.1.3.2 Native Layout Types
Layout Type Description
Default Pages that can be used for all purposes.
Pop-up Pages that slide in from the bottom and have a close icon instead of a back icon in the header. When a page with a default layout is open, all pop-up pages are dismissed and removed from the history.

3.2 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

3.3 Designer Section

3.3.1 Canvas Width

Canvas width defines the width in pixels of the page in the page editor. It is purely used for editing purposes; this property has no effect on the width of the page in the actual application.

Default value: 800

3.3.2 Canvas Height

Canvas height defines the preferred minimum height in pixels of the page in the page editor. It is purely used for editing purposes; this property has no effect on the height of the page in the actual application.

Default value: 600

4 Styling

4.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

5 Layout Widgets

Layouts can contain the following widgets:

Placeholder, header, and sidebar toggle are unique to layouts, whilst Layout grids and scroll containers can also be used on pages.