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.

Annotated image

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

Annotated image

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

Annotated image

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).

Annotated image

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.

Annotated image

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.

Annotated image

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.

Annotated image

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.

Annotated image

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

Annotated image

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:
  1. Filter out any page layouts which can’t te accessed by the user’s set of roles,

  2. filter out any page layouts where the visibility expression returns false,

  3. if the remaining set of layouts is not empty, use the first layout,

  4. if the remaining set of layouts is empty, use the first layout with no expression,

  5. 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.