UI Element - Button
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 Button.
TAB "Element Properties"
The TAB "Element Properties" contains the configuration for
-
value horizontal alignment (left, center, right)
-
UI element width configuration (percentage, pixel)
-
height (pixel, percentage)
-
UI container horizontal alignment (left, center, right)
-
shortcut (NONE, ESCAPE, RETURN, CTRL+RETURN, Alt+1, Alt+2, Alt+3, Alt+4, Alt+5, Alt+6, Alt+7, Alt+8, Alt+9, Alt+0)
-
spinner (checked, unchecked)
TAB "Data Mapping"
The TAB "Data Mapping" contains the attribute type related mapping of the UI element
-
enum value
-
string
-
enum
TAB "Events"
The TAB "Events" contains the events and related "Action" and "Validation" scripts of the UI element.
-
onClick
-
onDoubleClickFor each UI element the related event action is displayed at the right side of the UI element. In case of a validation error a default error message is displayed at the top right of the UI page and the action script is not executed.
TAB "Visibility"The TAB "Visibility" contains the visibility configuration and the "Visibility" scripts of the UI element. -
enabled/disabled
-
visible/invisibleFor each UI element the visibility can be changed by the checkbox "Visibility Toggle".
TAB "User Interface"The TAB "User Interface" contains the label and icon configuration of the UI element -
icon after text
-
icon before text
-
icon and enum mapped
-
icon without text
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 "Button"
-
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 "Button" 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_Button" with double click then keep default option for "Default Device" and "Default Label" then click button "OK" to create the UI page
Exercise 2: TAB "Element Properties"
-
Step 1: Drag&Drop UI Button from palette into second free span
-
Step 2: Repeat Step 2 and drag&drop UI Button to
-
H-Aligment [Center], [Right]
-
Width [50%], [100px]
-
Height [40px], [80px]
-
Container H-Aligment [Left], [Center], [Right]
-
Step 3: Open TAB "Implementation" SubTab "Element Properties" and select each UI Button to configure the value H-Alignment [Left], [Center], [Right]
-
Step 4: In next row select the UI Button to configure width [50%] and width [100px]
-
Step 5: Select each UI Button to configure height [50px] and height [100px]
-
Step 6: Select each UI Button to configure width [50%]. Then select each of them again and click at button "Span" to configure H-Alignment [Left], [Center], [Right] of the UI element
Exercise 3: TAB "Data Mapping"
-
Step 1: Drag&Drop UI Button from palette into second free span and open TAB "Implementation" SubTab "Data Mapping" and SubTab "Definition Objects".
-
Step 2: Search "gender" definition object and map "male" enum value with the button.
-
Step 3: Drag&Drop UI Button from palette into second free span of third row and open TAB "Implementation" SubTab "Data Mapping" and SubTab "Business Object".
-
Step 4: Map "confirmButton" string attribute with the button.
-
Step 5: Drag&Drop attribute "gender" from TAB "Data" into second free span of fourth row to open dialog "Select Component" to add the corresponding UI Button and uncheck property "Create label"
Exercise 4: TAB "Events" - Action Scripts
-
Step 1: Select the first UI Button and open TAB "Implementation" SubTab "Events" to specify event type "onClick"
-
Step 2: Implement the action script, which displays the related event action at the right side of the UI element.
localData.eventType.onClick = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CLICK;
-
Step 3: Repeat Step 1 and 2 for the other UI elements to specify further event types and related action scripts, which display the related event action at the right side of the UI element.
-
event type "onDoubleClick"
localData.eventType.onDoubleClick = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_DOUBLE_CLICK;
Exercise 5: TAB "Events" - Action & Validation Scripts
-
Step 1: Select the first UI Button of "Action and Validation Script" section and open TAB "Implementation" SubTab "Events" to specify event type "onClick"
-
Step 2: Implement the action the validation scripts, which display the related event action at the right side of the UI element in case of no validation error.
-
action script "onClick" event
localData.eventType.onClickValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CLICK_VALID;
-
validation script "onClick" event
localData.eventType.isValid;
-
Step 3: Repeat Step 1 and 2 for the other UI elements to specify further event types and related action and validation scripts, which display the action at the right side of the UI element.
-
action script
-
"onDoubleClick" event
localData.eventType.onDoubleClickValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_DOUBLE_CLICK_VALID;
-
validation script
-
"onDoubleClick" event
localData.eventType.isValid
Exercise 6: TAB "Visibility"
-
Step 1: Drag&Drop attribute "toggleVisibility" from TAB "Data" into the third free span and keep default in dialog "Select Component" to add the corresponding UI Label and UI CheckBox to the UI page.
-
Step 2: Select the first UI Button and open TAB "Implementation" SubTab "Visibility"
-
Step 3: Click at visibility type "Enabled" and select state "Script"
-
Step 4: Implement the visibility script, which toggles the visibility "enabled" and "disabled"
localData.toggleVisibility;
-
Step 5: Repeat steps 2..4 for second UI Button for visibility type "Visible", which toggles the visibility "visible" and "invisible"
Exercise 7: TAB "User Interface"
-
Step 1: Drag&Drop UI Button from palette into second free span of second row
-
Step 2: Repeat Step 1 and drag&drop UI Button on second free span of three next rows
-
Step 3: Select first UI Button and open TAB "Implementation", SubTAB "User Interface" and enter label "OK"
-
Step 4: Click "Icon" button to open dialog "Select icon"
-
Step 5: Select icon "fas-fa-check" and color "white" and click "Save"
-
Step 6: Repeat Step 3 for second UI Button and enter label "Save"
-
Step 7: Repeat Step 4 to open dialog "Select icon" "fal-fa-save" and check property "Before Text"
-
Step 8: Select third UI Button on TAB "User Interface" and select an icon "fal fa-edit", color "white" and Before Text property "checked"
-
Step 9: Open TAB "Data Mapping" and SubTAB "Definition Objects" and search for "buttonoption"
-
Step 10: Decollapse definition object "ButtonOption" and map attribute "EDIT" on Data Mapping field
-
Step 11: Select fourth UI Button on TAB "User Interface" and select an icon "fal fa-check-square", color "white"
Exercise 8: Set UI Page as submodel of the Frontend Service Model
-
Step 1: Open frontend service model "Automation/Service/Training/UIM/Exercise/Basic/Button"
-
Step 2: Select UI page "View Button" to open TAB "General", SubTAB "Element"
-
Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "Button" with double click
-
Step 4: Right click on button flow to set label with "Exit" flow.
Exercise 9: 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
