UI Layout Element - Visibility
Related subfolder of the training project: "Training/UIM/Exercise/Layout"
Chapter Overview
In this training chapter you get familiar with the visibility configuration of Layout UI elements.
The visibility can be configured for
-
grid row: visible/invisible
-
UI template: editable/readonly, enabled/disabled, visible/invisible
-
UI panel/referenced UI panel: editable/readonly, enabled/disabled, visible/invisible
-
tabbed panel: editable/readonly, enabled/disabled, visible/invisible
The following UI page contains a checkbox "Toggle Visible", "Toggle Editable" and "Toggle Enabled", which are mapped to boolean attributes "isVisible", "isEditable"and "isEnabled". Based on the attribute value "TRUE/FALSE" the visibility behaviour of the layout elements of the UI page is configured.
Exercise
In this exercise you will configure the visibility of Layout UI elements by implementing a UI page as described above.
Exercise 1: Create UI Page "Visibility"
-
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 "Visibility" 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_Visibility" with double click then keep default option for "Default Device" and click button "OK" to create the UI page
Exercise 2: Add as CheckBox "Toggle Visible", "Toggle Editable" and "Toggle Enabled"
-
Step 1: Drag&Drop attribute "isVisible" from TAB "Data" into third free span of second row.
-
Step 2: Drag&Drop attribute "isEditable" from TAB "Data" into fifth free span of second row.
-
Step 3: Drag&Drop attribute "isEnabled" from TAB "Data" into seventh free span of second row.
Exercise 3: Implement "Visible" Script for UI Panel of "BUS - LINE 2"
-
Step 1: Select UI panel of "BUS - LINE 2" and open TAB "Implementation" SubTAB "Visibility"
-
Step 2: Select "Script" to handle state "Visible" dynamically
-
Step 3: Enter visibility script:
localData.isVisible;
Exercise 4: Implement "Editable" Script for Tabbed Panel
-
Step 1: Select tabbed panel and open TAB "Implementation" SubTAB "Visibility"
-
Step 2: Select "Script" to handle state "Editable" dynamically
-
Step 3: Enter visibility script:
localData.isEditable;
Exercise 5: Implement "Enabled" Script for Button Template
-
Step 1: Select button template and open TAB "Implementation" SubTAB "Visibility"
-
Step 2: Select "Script" to handle state "Enabled" dynamically
-
Step 3: Enter visibility script:
localData.isEnabled;
Exercise 6: Implement "Visible" Script for "Footer" Row
-
Step 1: Select last row of "Footer" and open TAB "Implementation" SubTAB "Visibility"
-
Step 2: Select "Script" to handle state "Visible" dynamically
-
Step 3: Enter visibility script:
localData.isVisible;
Exercise 7: Test the UI Page in the Preview
