UI Layout Element - UI Panel
Related subfolder of the training project: "Training/UIM/Exercise/Layout"
Chapter Overview
In this training chapter you get familiar with the nestable UI Panel Layout element, which provides the possibility to cluster UI elements and structure a UI page.
Remark: A UI Panel can be moved into another span and has various configuration posibilities for CSS and Visibility.
The following UI page contains 2 UI panels, which themselves consist of 3 rows devided into 4 + 8 spans
Exercise
In this exercise you will get familiar with the configuration posibilities of the UI Panel layout element by implementing a UI page as described above.
Exercise 1: Create UI Page "UiPanel"
-
Step 1: Open context menu of folder "Automation/User Interface/Training/Exercise/Layout" in the model tree
-
Step 2: Select menu function "Create Model" to open dialog "Create User Interface Model"
-
Step 3: Enter model name "UiPanel" and keep option "Model Type: UI Page"
-
Step 4: Select option "From: Template" and click button "Search", open folder "…/Training/UIM/Template/Layout" to select template "TMPL_UiPanel" then click button "OK" to create the UI page
Exercise 2: Add UI Panel to the UI page
-
Step 1: Drag&Drop a UI Panel into the second and fourth span of the third row and specify a grid with column layout 4 + 8 and 3 rows.
Exercise 3: Move UI Panel
-
Step 1: Click at the right UI Panel and move it to a span below the other UI Panel
