Layout
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.
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:
Properties
General Section
Platform
Platform can only be set when a layout is created.
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.
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.
Layout Type
The layout type, determines the purpose of the layout and how a page using the layout is opened.
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. |
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. |
Common Section
Designer Section
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
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
Styling
Common Section
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.