UI Layout Element - Tabbed Panel
Related subfolder of the training project: "Training/UIM/Exercise/Layout"
Chapter Overview
In this training chapter you get familiar with the Tabbed Panel Layout element.
Remark: A Tabbed Panel can be moved into another span and has various configuration posibilities for CSS and Visibility.
The following UI page contains one Tabbed Panel of 2 TABs each of them contains 1 row with column layout 12
Exercise
In this exercise you will get familiar with the configuration posibilities of the Tabbed Panel layout element by implementing a UI page as described above.
Exercise 1: Create UI Page "TabbedPanel"
-
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 "TabbedPanel" and keep option "Model Type: UI Page"
-
Step 4: Select option "From: UI Page" to open dialog "Select UI Page", open folder "…/Training/UIM/Template/Layout" to select UI page "TMPL_TabbedPanel" with double click then keep default option for "Default Device" and click button "OK" to create the UI page
Exercise 2: Add Tabbed Panel to the UI page
-
Step 1: Drag&Drop a UI Tabbed Panel into the second span of the fifth row specifying a grid layout of column layout 12 and 1 row
-
Step 2: Select TAB "Panel 2" of the Tabbed Panel and drag&drop a grid layout element with column layout 12 and 1 row
