Layers
In Uiflow, layers represent the components, groups, and containers in your application. Each time you add an object to your application, a new layer appears in the Explorer panel. Parent objects (e.g., Collections, Constructors, Containers, Logic Groups) appear as parent layers, with child objects displayed as child layers beneath them.
The Design and Logic views have unique sections to display application layers:
The Design Layers section appears in the Design view's Explorer panel, and displays all Design objects in your application. When you select an item in the Design Layers section, it selects the corresponding object in the Preview panel.
The Design Layers section also enables you to:
Each layer in the Design Layers section includes a counter, which displays the number of times a Design object is referenced in the application logic.
Note: The counter also appears in the Logic view's Explorer panel, under the Design References section.
When you drag-and-drop layers within the Design Layers section, their order changes in the parent object according to the parent's Layout settings. Depending on the parent’s Mode setting, components reorder from left to right and/or top to bottom.
The following sections outline how objects rearrange when the parent's Mode is set to:
In a parent object formatted as a Column, dragging layers up or down in the Design Layers section moves their corresponding objects to higher or lower positions. In this example, the Submit Button layer is moved up, causing the Submit Button component to move up in the Preview panel.
In a parent object formatted as a Row, dragging layers lower in the Design Layers section repositions their corresponding objects from left to right and vice versa. In this example, the Submit Button layer moves higher in the Design Layers section, causing the Submit Button component to move from right to left in the Preview panel.
In a parent object formatted as a Grid, dragging layers up in the Design Layers section repositions their corresponding objects from right to left until the end of the row. When the object reaches the end of a row, it moves to the right side of the next highest row.
In this example, the Submit Button layer moves higher in the Design Layers section, causing the Submit Button component to move from right to left, and up a row in the Preview panel.
The Design Layers section enables you to show and hide layers and their corresponding Design objects from your application UI:
Note: When you show/hide a parent layer, its children are also revealed/hidden.
To hide a layer:
- 1.Hover over the layer you want to hide.
- 2.Click the eye icon. This grays out the layer and its children, and hides the corresponding objects from your application UI.
To show a hidden layer:
- 1.Locate the layer you want to show.
- 2.Click the crossed-out eye icon on the layer. This reveals the corresponding objects in your application UI.
The Flow Tree section appears in the Logic view's Explorer panel, and displays all the Logic objects and Design references in your application. When you click on a layer in the Flow Tree section, the Logic panel displays the layer and selects the corresponding object.
Logic layers are color-coded to match their corresponding objects:
- Blue layers: Design references
- Green layers: Stateful components
- Black layers: Logic components
- Orange layers: Logic groups
The Design References (Logic view only) section contains a tree of scripts that map to your app's Design components, and displays them as layers. You can drag-and-drop layers into the Logic canvas to integrate references into your logic flows and add functionality to your application UI.
Last modified 20d ago