Designing layout

Layout Editor tool is used to assemble widgets added on a schema into application pages.

See User Interface to learn how to launch Layout Editor.

Add widget to the layout

Toggle the widget panel by clicking Space button or using the right menu. All widgets added to the App schema will be available on the panel. Click on the widget to open Preview mode, it will be available if widget is properly connected to data.

To add a widget to the layout click on a widget and move it to the layout matrix holding the mouse button. You can add a widget to the layout as many times as you need. Move a widget over the layout matrix holding the mouse button. Hover the cursor over the "turn page" icon on the widget, hold the mouse button and change the size of a widget.

All widgets stick to the top of the page. If you want to put the widget at the middle you need to use "Empty" widget, available by default in the widgets list.

Layout matrix

Layout matrix is split into cells. Depending on widgets arrangement, matrix should have higher or lower resolution, you can manage it using "Page size" function at the top of the widget panel. You can create scrollable layout by adding widgets to the bottom of the matrix or expanding widgets.

Views

You can split your application into pages by using Views. Use menu at the top of the page to create a new view. You can set a view name and a slug in the Edit View window. You can also set a view as default - the main view of your application.

"Hidden" toggle allows you to hide your view in the public mode, it will be visible only in the development mode.

You can use same widgets on different views. To set up navigation between pages, use "tabs" widget or other types of navigation.

Datascope

Datascope contains widgets that should be shared between pages in your application. You can add there, for example, calendar, application content, filters or other widgets. To add a widget to datascope, click on "filter" icon at the top of the page and select required widgets from the list.

Widgets formatting

Use "styles" function to tune any widget using CSS. You can change widget fonts, colors, play with a header, remove not required widget features etc.