View canvas
The view canvas is a what-you-see-is-what-you-get (WYSIWYG) representation of your app's user interface.
This section the UI contains the following, in order from top to bottom
View canvas toolbar – gives access to various tools and functionalities related to the view canvas.
Header configuration – determines how the native header element rendered at the top of each page on mobile functions.
View canvas itself
Navigation configuration – determines the navigation style for your app (e.g. native tabs or fullscreen), the initial page structure and so on
The view canvas toolbar is located below the global toolbar.
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.
To change zoom level of the canvas, click on the zoom dropdown (by default showing 100%) on the view canvas toolbar.
The View – Variables switch allows you to change between the variable editor and the view canvas.
The blue element at the top of the view canvas allows you to configure both the styles and content of the header bar, located by default at the top of each page.
Importantly, the header configuration is not yet WYSIWYG, so you have to have preview your changes via one of the available preview apps to see how they take effect.
You can read more in the header configuration guide.
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.
You can add new view components to the view canvas in two ways:
Drag-and-drop them in from the view component library.
Add them via the Marketplace.
Note that you can drag-and-drop components directly to the layout tree also.
You can duplicate components by clicking the duplicate button that appears in the context toolbar when you have a component selected.
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.
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 read more in the component properties panel and component style panel guides
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.
To delete a component, click the x icon in the blue component toolbar.
You can enter isolation mode via the blue component toolbar that appears when you have a composite component selected, or by double-clicking on a composite component.
