Page Layouts

Page layouts enable you to dynamically change the contents of the page based on who is viewing what and from where.

Corteza provides a flexible mechanism of defining what layouts are available, which is shown when, and how they interact with each other. The entire system and their interaction is defined using simple expressions, constraints, and actions.

Example use-cases:

User onboarding through multiple pages where each page focuses on a single bit of information such as contact information, billing data, and payment methods.
Show different amount of data based on the role or device type.

Planed feature improvements:

Expand the supported set of actions,
allow users to fork predefined layouts and create personal ones,
allow interactions to span through multiple different pages; currently a layout session exists while you’re on a specific page.

Configuring Page Layouts

Page layouts can be managed at the bottom of the page editor.

While in your Low Code namespace, navigate to the admin page pages, and click on the edit button next to the page you wish to edit. The user interface available under compose page editor.

By default, when you create a page, you’ll get a primary page layout. To add additional layouts, click on the Add layout button.

Click on the configuration button to define when the layout may be visible and what buttons and actions are available.

The condition is an expression that determines if the layout can be shown or not. Visibility conditions are simple expressions that evaluate into a true (show) or false (hide).

Roles define a list of roles for which this page layout will be visible for. If a user is not a member of a specific role, the layout is not visible regardless of the expression.

This is not the same as hiding them behind RBAC. Users will still be able to access these layouts via the API, but the Low Code layout manager will not consider them.

The record toolbar section defines what buttons (default actions) the specific page layout may use. Controlling these buttons is useful when we want to define a series of page layouts and just the last one should have the option to submit the form.

Under actions, you can define additional operations you want to perform through via the specific page layout.

Currently, the only supported action is to navigate to a different layout. New actions are in the pipelines.

Building Page Layouts

The contents of page layouts are defined in the page layout builder. The builder has the same look and feel as the previous page builder.

In the list of pages, click on the page builder button.

Alternatively, if you’re editing a page, you can navigate to the page builder from there.

Display Evaluation Logic

When a user navigates to a page, the page layout manager needs to determine what page layout should be presented.

The layout manager uses the following logic to determine what page layout to show:

Filter out any page layouts which can’t te accessed by the user’s set of roles,
filter out any page layouts where the visibility expression returns false,
if the remaining set of layouts is not empty, use the first layout,
if the remaining set of layouts is empty, use the first layout with no expression,
if no page layout matches this flow, the user is redirected to where they came from.

Visibility Conditions

Visibility conditions are expressions which determine if a page layout can be shown to the user. A page layout is showable if the visibility condition returns a truthy value (true or any other value JavaScript considers truthy).

Refer to the expressions page for details on the syntax.

Variable Reference

Table 1. A list of available variables:
user	The variable contains the current authenticated user object.
record	The variable contains the current record object. `null` if no record available.
screen.width	The variable defines the current screen width in pixels.
screen.height	The variable defines the current screen height in pixels.
screen.userAgent	The variable defines the current browser user agent.
screen.breakpoint	The variable defines the current breakpoint. The breakpoint is the same as the ones the responsive layouts use.
oldLayout	The variable defines the previous layout the user was on. `null` if this is the first layout.
layout	The variable defines the current layout the user is on.
isView	The variable defines if the interface is in view mode.
isCreate	The variable defines if the interface is in create mode.
isEdit	The variable defines if the interface is in edit mode.