Pages

Pages are the main structure for what user sees and interacts with in a Composer app. Your app will most likely have multiple pages, with the user moving between them to access different functionalities (you can read more about this in the navigation guide).

The app builder has a single page open at any given time. You can change the active page and create new ones via the dropdown on the left side of the global toolbar.

Page structure

Every page has a base container component called Page layout, which acts as the parent for all the other components on the page. It always has a horizontal layout direction and by default, some padding to make it nice to just drag-and-drop some components in.

The base container can be selected in three ways:

• clicking on an area on the view canvas not occupied by another view component
• clicking the grey area around the view canvas
• clicking the Page layout item in the layout tree

When the base container is selected, you can configure properties and styles for the page as a whole. For a list and description of available properties, see the page properties reference guide.

Global Canvas

Global canvas is a page that exists in the context of the whole app. Here, you can edit all variables that exist within your app and create app-wide logic.

Page properties

When the page is selected, there are several properties that can be viewed or edited via the properties panel in the right sidebar.

Name

Human-readable name for the page. Used in e.g. property dropdowns where a page can be selected (such as when using the Open page flow function) and in the page selection menu. By default, this is also what is shown in the navigation bar when this page is open.

Short description

ID

Internal ID for the page. Corresponds to the index in the Composer URL in your browser. While this is the actual value used by internal APIs, in most cases, this value is resolved for you automatically, and you don't have to worry about it.

Show spinner on page load

If toggled on, the page will show a centered spinner instead of page content until the Hide spinner flow is called. This can be useful when e.g. navigating to details page that loads some data from the Internet, allowing you to provide direct feedback for user interaction without showing a broken UI.

Page styles

The Style tab gives you access to the following style properties.

Padding

Used to set the padding for the base container on your page. Bound to the $paddingPageHorizontal and $paddingPageVertical theme variables by default.

Background color

Background color for the page. Bound to the $colorBackground theme variable by default.

Disable scroll

If checked, you cannot scroll the page on mobile. This is useful if you want to create your own scrollable section with the Scroll view component.

Stretch to viewport height

If checked, the base container will grow to fill the whole viewport. This is useful if you want to e.g. position a component at the bottom of the screen with absolute position.

Disable safe area

Before the 'notch' design, introduced by Iphone X, UI layouts would go edge to edge on the screen, taking up all available space. However, with the new design Apple had to introduce the 'safe area', which is a feature that restricts the edges of View Components so they don’t get clipped by the rounded corners and notch of the iPhone X.
In Composer, disabling the safe area will allow the UI layout to take out all possible space on the screen.