Layout designer

The layout designer provides a canvas to drop and preview UI components in a view. The canvas can be configured for responsive layouts with either a desktop-first or mobile-first approach.

Canvas

The canvas renders a preview of a view based on the device screen size selected in the list immediately above the canvas.

Some settings will affect how and if components are displayed on the canvas:

• If you explicitly set the Visibility component of a property to false the component will be removed from the canvas.

• If you have multiple components inside a Visibility group, only the most recently selected component will be displayed.

• If you select a conditional property or conditional style of an component, the changes that would be applied will be previewed.

• If a responsive strategy has been enabled and changes have been applied at the current breakpoint, those changes will be represented.

Good to know

If you can't scroll in the layout designer to see UI components further down the view, set the Overflow style property of the view to Auto.

Responsive strategy

A responsive design allows you to create one app for all screen sizes, from mobile phones to widescreen monitors, and use breakpoints to adapt the design based on the screen size in the client. For a detailed walkthrough of making a responsive app, see How to build a responsive design.

To implement responsive design in the layout designer you first need to select a responsive strategy, either Desktop-first or Mobile-first. You can select an app's responsive strategy on app creation, or during development in App settings or by clicking the three-dots icon in the top-right corner of the layout designer.

When a strategy is selected, the list of screen-size icons at the top of the layout designer are ordered with the default size first. For a desktop-first app, the list is in decreasing order of screen size, while it is the reverse for a mobile-first app. These icons represent screen-size breakpoints at which your views can be adapted. The breakpoints are:

• Large: 1440 px and over (larger laptops and desktop monitors)

• Medium: 1240–1439 px (small and medium sized laptops)

• Small: 600–1239 px (tablets)

• Extra Small: up to 600 px (mobile phones)

You can first design views for your default screen size (Large or Extra Small) and then switch through the screen-size icons to preview and adapt the design for increasingly larger or smaller screens. To adapt the design you simply select the relevant component and override a property in the properties pane. The properties set for prior screen-sizes are surrounded by a blue dashed line.

Typical examples of properties that are overridden when adapting for smaller screens are less margin and padding, vertical layouts instead of horizontal, and hiding non-critical components.

If you do not selected a responsive strategy, you can still preview view sat the different screen sizes but breakpoints are not provided to adapt the design.