Layout designer
Last updated
Was this helpful?
Last updated
Was this helpful?
The layout designer provides a canvas to drop and preview in a . The canvas can be configured for responsive layouts with either a desktop-first or mobile-first approach.
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 , 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 has been enabled and changes have been applied at the current breakpoint, those changes will be represented.
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 .
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 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)
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.
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 . The properties set for prior screen-sizes are surrounded by a blue dashed line.