UI Element - ProgressBar
Related subfolder of the training project: "Training/UIM/Exercise/Basic"
Chapter Overview
In this training chapter you get familiar with the configuration possibilities of the UI Element ProgressBar.
TAB "Element Properties"
The TAB "Element Properties" contains the configuration for
-
UI element width configuration (percentage, pixel)
-
UI container horizontal alignment (left, center, right)
-
UI element show label (check, uncheck)
TAB "Data Mapping"
The TAB "Data Mapping" contains the attribute type related mapping of the UI element
-
float
-
integer
TAB "Data Validation"
The TAB "Data Validation" contains the attribute type related validation, default value and mandatory specification of the UI element based on the BO attribute configuration in SubTAB "Values and Validation".
-
float default value
-
integer default value
TAB "Visibility"The TAB "Visibility" contains the visibility configuration and the "Visibility" scripts of the UI element. -
visible/invisibleFor each UI element the visibility can be changed by the checkbox "Visibility Toggle".
Exercise
In this exercise you will get familiar with the configuration possibilities of the UI element by completing the UI TABs as described above. You can test the implementation in UI Page Preview, in the Preview of the Frontend Service Model and optionally in the xAPPnow User Portal.
Exercise 1: Create UI Page "ProgressBar"
-
Step 1: Open context menu of folder "Automation/User Interface/Training/UIM/Exercise/Basic" in the model tree
-
Step 2: Select menu function "Create Model" to open dialog "Create User Interface Model"
-
Step 3: Enter model name "ProgressBar" 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/Basic" to select template "TMPL_ProgressBar" with double click then keep default option for "Default Device" and click button "OK" to create the UI page
Exercise 2: TAB "Element Properties"
-
Step 1: Drag&Drop attribute "element.percent" from TAB "Data" into second free span to open dialog "Select Component", select "ProgressBar" on list, keep the checkbox "Create Label" selected to add the corresponding UI Label and UI ProgressBar to the UI page and click button "OK".
-
Step 2: Repeat Step 1 and add Label and ProgressBar for attribute "element.pixel"
-
Step 3: Select each UI ProgressBar to configure width [50%] and width [100px]
-
Step 4: Drag&Drop attribute "element.left" from TAB "Data" into second free span to open dialog "Select Component", select "ProgressBar" on list, keep the checkbox "Create Label" selected to add the corresponding UI Label and UI ProgressBar to the UI page
-
Step 5: Repeat Step 4 and add Label and ProgressBar for attributes
-
"element.center"
-
"element.right"
-
Step 6: In row "Container (H-Alignment)" for each UI ProgressBar:
-
Select each UI ProgressBar to configure width [50%].
-
Select button "Span" to configure H-Alignment [Left], [Center], [Right] of the UI element
-
Step 7: Drag&Drop attribute "element.check" from TAB "Data" into second free span to open dialog "Select Component", select "ProgressBar" on list, keep the checkbox "Create Label" selected to add the corresponding UI Label and UI ProgressBar to the UI page
-
Step 8: Repeat Step 7 and add Label and ProgressBar for attribute "element.uncheck"
-
Step 9: On second UI ProgressBar uncheck property "Show Label"
Exercise 3: TAB "Data Mapping"
-
Step 1: Drag&Drop attribute "license.price" from TAB "Data" into second free span and select option "ProgressBar" in dialog "Select Component" to add the corresponding UI Label and UI ProgressBar to the UI page.
-
Step 2: Repeat Step 1 to add Label and ProgressBar for attribute "license.validDays"
Exercise 4: TAB "Data Validation"
-
Step 1: Drag&Drop attribute "product.salePrice" from TAB "Data" into the third free span of second row and select option "ProgressBar" in dialog "Select Component" to add the corresponding UI Label and UI ProgressBar to the UI page.
-
Step 2: Repeat Step 1 and add Label and ProgressBar for attribute "product.id"
Exercise 5: TAB "Visibility"
-
Step 1: Drag&Drop attribute "toggleVisibility" from TAB "Data" into the third free span of third row and select option "ProgressBar" in dialog "Select Component" to add the corresponding UI Label and UI CheckBox to the UI page.
-
Step 2: Select the first UI ProgressBar and open TAB "Implementation" SubTab "Visibility"
-
Step 3: Click at visibility type "Visible" and select state "Script"
-
Step 4: Implement the visibility script, which toggles the visibility "visible" and "invisible"
localData.toggleVisibility;
Exercise 6: Set UI Page as submodel of the Frontend Service Model
-
Step 1: Open frontend service model "Automation/Service/Training/UIM/Exercise/Basic/ProgressBar"
-
Step 2: Select UI page "View ProgressBar" to open TAB "General", SubTAB "Element"
-
Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "ProgressBar" with double click
-
Step 4: Right click on button flow to set label with "Exit" flow.
Exercise 7: Test the UI Page
-
Step 1: Open UI Page and click button "Preview" in the toolbar to directly test the UI page within the UI editor
-
Step 2: Optionally publish the frontend service model and test the UI page in User Portal
