Navigation configuration – determines the navigation style for your app (e.g. native tabs or fullscreen), the initial page structure and so on
View canvas toolbar
The view canvas toolbar is located below the global toolbar.
Change canvas size and active device target
At the left, you have a dropdown to change the canvas size and active device target.
Your selection affects the view canvas width, as well as changing the default values for relevant system variables used in the WYSIWYG rendering.
If you are using advanced style formulas to e.g. render different styles based on desktop vs. mobile, changing the device target via the dropdown allows you to preview how your app looks, as well as make edits in the right context.
Change zoom level
To change zoom level of the canvas, click on the zoom dropdown (by default showing 100%) on the view canvas toolbar.
View-Variables switch
The View – Variables switch allows you to change between the variable editor and the view canvas.
View canvas
The view canvas shows a WYSIWYG representation of your current page's user interface. To change the active page or create a new one, use the dropdown in the left side of the global toolbar.
Adding components
You can add new view components to the view canvas in two ways:
Note that you can drag-and-drop components directly to the layout tree also.
Duplicating components
You can duplicate components by clicking the duplicate button that appears in the context toolbar when you have a component selected.
Copy-pasting components
You can also copy-paste components with CMD+C and CMD+V (CTRL+C and CTRL+V in Windows).
If you have a container selected, the component will be pasted inside that container (unless you have just copied the same container). Otherwise, the component will be pasted alongside the selected component.
Selecting components
To select a component, click on it either via the canvas or the layout tree. This gives you access to its properties and styles.
You can move components on the canvas around by grabbing them with your mouse and dragging them to the desired position. A highlighted line will show where the component will be placed after you release your mouse.
Alternatively, you can use the layout tree to rearrange components, similarly via drag-and-drop.
Deleting components
To delete a component, click the x icon in the blue component toolbar.