xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

UI Element - Dynamic ListBox

 
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 Dynamic ListBox.
 
 
 
TAB "Element Properties"
 
The TAB "Element Properties" contains the configuration for
 
  • value horizontal alignment (left, center, right)
  • UI element width configuration (percentage, pixel)
  • UI container horizontal alignment (left, center, right)
  • visible rows
  • key expression (name + rating, name + price)
     
 
 
 
 
 
TAB "Data Mapping"
 
The TAB "Data Mapping" contains the attribute type related mapping of the UI element
 
  • Business Object (BO) list
  • selected BO list
  • selected BO
 
 
 
 
 
 
 
 
TAB "Events"
 
The TAB "Events" contains the events and related "Action" and "Validation" scripts of the UI element.
 
  • onClick
  • onDoubleClick
  • onBlur
  • onChange
     
    For 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 the visibility configuration and the "Visibility" scripts of the UI element.
     
  • enabled/disabled
  • visible/invisible
     
    For 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 "Dynamic ListBox"
 
  • 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 "DynamicListBox" 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_DynamicListBox" 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 "instrumentList" from TAB "Data" into first free span to open dialog "Select Component", select "DynamicListBox" on list to add the corresponding UI Dynamic ListBox to the UI page and click button "OK".
 
 
 
 
 
UI Element - Dynamic ListBox
 
 
  • Step 2: Repeat Step 1 and add UI Dynamic ListBox
  • H-Aligment [Center], [Right]
  • Width [50%], [100px]
  • Container H-Aligment [Left], [Center], [Right]
  • Visible Rows [1 row], [3 row], [5 rows]
 
 
 
UI Element - Dynamic ListBox
 
 
 
  • Step 3: Select each of previously added UI Dynamic ListBox and open TAB "Implementation" SubTab "Data Mapping" to map BO "Instrument" on field "Single selection"
 
 
 
UI Element - Dynamic ListBox
 
 
 
  • Step 4: Open TAB "Implementation" SubTab "Element Properties" and select each UI Dynamic ListBox to configure the value H-Alignment [Left], [Center], [Right]
 
 
 
UI Element - Dynamic ListBox
 
 
 
  • Step 5: In next row select the UI Dynamic ListBox to configure width [50%] and width [100px]
 
 
 
UI Element - Dynamic ListBox
 
 
  • Step 6: Select each UI Dynamic ListBox for "Container (H-Alignment)" property 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
     
     
     
 
UI Element - Dynamic ListBox
 
  • Step 7: Select each UI Dynamic ListBox for "Visible Rows" property to configure Visible rows with [1 row], [3 row], [5 rows]
     
     
     
    UI Element - Dynamic ListBox
 
 
 
 
 
  • Step 8: Select UI Dynamic ListBox with label "Item - Rating" and click on Key Expression button to open dialog "Key and Value Configuration"
     
    REMARK: To specify "Key Expression" property the UI Dynamic ListBox must have a BO List mapped. See Exercise 3 for "Data Mapping"
     
 
 
UI Element - Dynamic ListBox
 
 
 
  • Step 9: Select key "name: Product" and on textarea "Value Configuration Script"  enter the following line to display a label plus the name and rating of the product item:
 
"Item - Rating: " + obj.name + " - " + obj.rating;
 
 
 
UI Element - Dynamic ListBox
 
 
  • Step 10: Repeat Steps 7 and 8 for next UI Dynamic ListBox with label "Item - Price" then select key "name: Product" and enter the following line:
 
"Item - Price: "+ obj.name + " - " + obj.price;
 
 
Exercise 3: TAB "Data Mapping"
 
  • Step 1: Drag&Drop attribute "issueList" from Data TAB into first free span of second row to open dialog "Select Component" and add the corresponding UI Dynamic ListBox to the UI page
  • Step 2: Select UI Dynamic ListBox and open TAB "Implementation", SubTAB "Data Mapping" to map BO "issueSelected" into property "Single selection"
 
 
 
UI Element - Dynamic ListBox
 
 
  • Step 3: Select UI Dynamic ListBox and open TAB "Implementation", SubTAB "Element Properties" and click button "Data Config" to open dialog "Key and Value Configuration"
  • Step 4: Select key "issueName: Issue Name" and on textarea "Value Configuration Script"  enter the following line to display a label plus the name of the issue:
 
"Issue - " + obj.issueName;
 
 
 
 
 
 
 
  • Step 5: Repeat Step 1 for first free span of third row and then select UI Dynamic ListBox and open TAB "Implementation", SubTAB "Data Mapping" to map BO "issueSelectedList" into property "Multiple selection"
  • Step 6: Repeat steps 3 and 4 for the added UI Dynamic ListBox to stablish Data Configuration properties.
 
 
Exercise 4: TAB "Events" - Action Scripts
 
 
  • Step 1: Select the first UI Dynamic ListBox and open TAB "Implementation" SubTab "Events" to specify event type "onClick"
  • Step 2: Implement the action script, which displays the event action at the right side of the UI element.
 
localData.eventType.onClick = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CLICK;
 
                       
 
 
UI Element - Dynamic ListBox
 
 
 
 
  • 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;
 
  • event type "onBlur"
localData.eventType.onBlur = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_BLUR;
 
  • event type "onChange"
localData.eventType.onChange = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CHANGE;
 
 
 
 
UI Element - Dynamic ListBox
 
 
Exercise 5: TAB "Events" - Action & Validation Scripts
 
  • Step 1: Select the first UI ListBox 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
 
 
UI Element - Dynamic ListBox
 
 
 
  • 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 related event 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;
 
  • "onBlur" event
localData.eventType.onBlurValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_BLUR_VALID;
 
  • "onChange" event
localData.eventType.onChangeValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CHANGE_VALID;
 
 
 
  • validation script
  • "onDoubleClick" event
localData.eventType.isValid
 
  • "onBlur" event
localData.eventType.isValid
 
  • "onChange" event
localData.eventType.isValid
 
 
 
 
UI Element - Dynamic ListBox
 
 
 
 
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.
 
 
UI Element - Dynamic ListBox
 
 
 
  • Step 2: Select the first UI Dynamic ListBox 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
 
 
UI Element - Dynamic ListBox
 
 
  • Step 5: Repeat steps 2..4 for second UI Dynamic ListBox for visibility type  "Visible", which toggles the visibility "visible" and "invisible"
 
 
 
UI Element - Dynamic ListBox
 
 
 
Exercise 7: Link UI Page to Frontend Service Model
 
  • Step 1: Open frontend service model  "Automation/Service/Training/UIM/Exercise/Basic/DynamicListBox"
  • Step 2: Select UI page "View Dynamic ListBox" to open TAB "General", SubTAB "Element"
  • Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "DynamicListBox" with double click
     
     
     
     
     
  • Step 3: Right click on button flow to select button "Exit".
     
 
 
Exercise 8: 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
 
 
1

Select UI Element

1. Select UI Element
Select each UI Dynamic ListBox for "Visible Rows" property
2

Specify Visible Rows

2. Specify Visible Rows
Define amount of visible rows
1

Drag&Drop Attribute from Data TAB

1. Drag&Drop Attribute from Data TAB
Drag&Drop attribute "instrumentList" from Data TAB into first free span to open dialog "Select Component" to add the corresponding UI Dynamic ListBox to the UI page
 
1

Drag&Drop Attribute from Data TAB

1. Drag&Drop Attribute from Data TAB
Drag&Drop attribute "instrumentList" from Data TAB into first free span to open dialog "Select Component" to add the corresponding UI Dynamic ListBox to the UI page
2

Drag&Drop Attribute from Data TAB

2. Drag&Drop Attribute from Data TAB
Drag&Drop attribute "instrumentList" from Data TAB into first free span to open dialog "Select Component" to add the corresponding UI Dynamic ListBox to the UI page
3

Drag&Drop Attribute from Data TAB

3. Drag&Drop Attribute from Data TAB
Drag&Drop attribute "instrumentList" from Data TAB into first free span to open dialog "Select Component" to add the corresponding UI Dynamic ListBox to the UI page
4

Drag&Drop Attribute from Data TAB

4. Drag&Drop Attribute from Data TAB
Drag&Drop attribute "instrumentList" from Data TAB into first free span to open dialog "Select Component" to add the corresponding UI Dynamic ListBox to the UI page
1

Specify "Single Selection"

1. Specify "Single Selection"
Select each of previously added UI Dynamic ListBox and open TAB "Implementation" SubTab "Data Mapping" to map BO "Instrument" on field "Single selection"
 
1

Configure Value H-Alignment

1. Configure Value H-Alignment
Open TAB "Implementation" SubTab "Element Properties" and select each UI Dynamic ListBox to configure the value H-Alignment [Left], [Center], [Right]
1

Configure Element Width

1. Configure Element Width
Select the UI Dynamic ListBox to configure width [50%] and width [100px]
1

Click Button Span

1. Click Button Span
Click at button "Span" to open properties for container of UI element
2

Configure H-Alignment

2. Configure H-Alignment
Configure H-Alignment [Left], [Center], [Right]
1

Open Data Configuration

1. Open Data Configuration
Select UI Dynamic ListBox with label "Item - Rating" and click on Data Config button to open dialog "Key and Value Configuration"
1

Enter Text

1. Enter Text
Select key "name: Product Name" and on textarea "Value Configuration Script"  enter the line: "Item - Rating: " + obj.name + " - " + obj.rating;
1

Drag&Drop from Data TAB

1. Drag&Drop from Data TAB
Drag&Drop attribute "issueList" from Data TAB into first free span of second row to open dialog "Select Component" and add the corresponding UI Dynamic ListBox to the UI page
2

Map Single Selection

2. Map Single Selection
Select UI Dynamic ListBox and open TAB "Implementation", SubTAB "Data Mapping" to map BO "issueSelected" into property "Single selection"
1

Select UI Element

1. Select UI Element
Select UI Dynamic ListBox and open TAB "Implementation" SubTab "Events"
2

Select Event Type

2. Select Event Type
Specify event type "onClick"
3

Enter Action Script

3. Enter Action Script
Implement the action script
4

Event Action

4. Event Action
The event action will be displayed at the right side of the UI element
1

Select UI Element

1. Select UI Element
 
Select UI Dynamic ListBox and open TAB "Implementation" SubTab "Events"
2

Select Event Type

2. Select Event Type
Specify event type accordingly
3

Enter Action Script

3. Enter Action Script
Implement the action script
4

Event Action

4. Event Action
The event action will be displayed at the right side of the UI element
1

Select UI Element

1. Select UI Element
Select UI Dynamic ListBox and open TAB "Implementation" SubTab "Events"
2

Specify Event Type

2. Specify Event Type
Specify event type "onClick"
3

Enter Action&Validation Scripts

3. Enter Action&Validation Scripts
Implement the action script and validation script
4

Event Action

4. Event Action
The event action will be displayed at the right side of the UI element
1

Select UI Element

1. Select UI Element
Select UI Dynamic ListBox and open TAB "Implementation" SubTab "Events"
2

Select Event Type

2. Select Event Type
Specify event type accordingly
3

Enter Action&Validation Scripts

3. Enter Action&Validation Scripts
Implement the action script and validation script accordingly
4

Event Action

4. Event Action
The corresponding event action will be displayed at the right side of the UI element
1

Drag&Drop from Data TAB

1. Drag&Drop from Data TAB
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.
1

Select UI Element

1. Select UI Element
Select the first UI Dynamic ListBox and open TAB "Implementation" SubTab "Visibility"
2

Select "Enabled" and State "Script"

2. Select "Enabled" and State "Script"
Click at visibility type "Enabled" and select state "Script"
3

Enter Visibilty Script

3. Enter Visibilty Script
Implement the visibility script, which toggles the visibility "enabled" and "disabled"
1

Select UI Element

1. Select UI Element
Select the UI Dynamic ListBox and open TAB "Implementation" SubTab "Visibility"
2

Select "Visible" and State "Script"

2. Select "Visible" and State "Script"
Click at visibility type "Visible" and select state "Script"
3

Enter Visibilty Script

3. Enter Visibilty Script
Implement the visibility script, which toggles the visibility "visible" and "invisible"