Layout & Controls

This module was previously called “User Interface” and was renamed to “Layout & Controls” in version 26.3.0 with the release of the new v2 look and feel.

The user interface (UI) of a designer application is built using a drag-and-drop interface available in the Layout & Controls module. Within this module, you will find structural components, as well as input and output elements, located in the Context Menu. In the classic view (pre version 26.3.0), this menu appears on the left-hand side, while in V2 (post version 26.3.0), it is positioned at the top.

The central workspace is called the Staging Area. This is where you define the layout and configure the control sets for your application page.

You can switch from V2 to Classic View by selecting the “Classic View” button in the top-right corner. Please note that switching back from Classic View to V2 is not available within the same session. To return to V2, you will need to close and reopen the Layout & Controls module.

You can drag and drop the controls from the Context Menu into the Staging Area to add a new instance of that control. The control module that you are dragging will have a dashboard border around it as you hover over a section where it can be placed. Moving a control module over an invalid drop location will not show you the preview of the control within the Staging Area. You can also move control modules that have already been created in order to change their positioning within the application. All input and output modules must be placed inside a Container, and a Container must be placed in a Section. All section modules will come with a Container inside by default.

Click a module to edit its properties. You must assign a Named Range to the control from this contextual menu for each input field. You can also change settings like control label properties, and other control-specific features.

In Classic View, the Properties Menu is always visible and automatically displays the properties of the currently selected control, allowing you to make immediate adjustments without additional interaction.

In V2, the Properties Menu is hidden by default to provide a cleaner workspace. To view or edit the properties of a selected control, you can open the panel by clicking the blue button located in the bottom-right corner. This button toggles the Properties Menu, allowing you to open and close it as needed while working within the Staging Area.

You can only edit one page at a time. The active page can be selected from the Properties Menu on the top-right corner.

In V2, you can navigate between application pages using the page navigation button located in the bottom-left corner. This button displays the total number of pages in the application, giving you a quick overview of your project structure.

When activated, it opens a floating menu at the bottom of the screen that lists all available pages. From this menu, you can easily select and switch between pages without leaving the Layout & Controls module, making it more efficient to manage multi-page applications.