xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

UI Element - RadioButtonGroup

 
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 RadioButtonGroup.
 
 
 
TAB "Element Properties"
 
The TAB "Element Properties" contains the configuration for
 
  • UI container horizontal alignment (left, center, right)
  • label position (text before, text after)
  • v-orientation (horizontal, vertical)
     
     
     
 
 
 
TAB "Data Mapping"
 
The TAB "Data Mapping" contains the attribute type related mapping of the UI element
 
  • enum
     
 
 
 
 
 
 
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".
 
  • default value
  • mandatory
     
     
     
     
     
     
     
    TAB "Events"
     
    The TAB "Events" contains the events and related "Action" and "Validation" scripts of the UI element.
     
  • onClick
  • onDoubleClick
     
    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 visibility configuration and the "Visibility" scripts of the UI element.
     
  • editable/read-only
  • 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 "RadioButtonGroup"
 
  • 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 "RadioButtonGroup" 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_RadioButtonGroup" 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 attribute "color" from TAB "Data" into second free span to open dialog "Select Component", select "RadioButtonGroup" on list, keep the checkbox "Create Label" selected to add the corresponding UI Label and UI RadioButtonGroup to the UI page and click button "OK".
 
 
 
 
 
 
UI Element - RadioButtonGroup
 
 
  • Step 2: Repeat Step 2 and add Label and RadioButtonGroup for attribute "color" to
  • Container H-Aligment [Center], [Right]
  • Label Position [Text Before], [Text After]
  • V-Orientation [Checked], [Unchecked]
 
 
 
UI Element - RadioButtonGroup
 
 
 
  • Step 3: Open TAB "Implementation" SubTab "Element Properties" and select each RadioButtonGroup. Click at button "Span" to configure the value H-Alignment [Left], [Center], [Right]
 
 
 
UI Element - RadioButtonGroup
 
 
 
  • Step 4: In next row select the first UI RadioButtonGroup to configure label position text before [checked]
 
 
 
UI Element - RadioButtonGroup
 
 
  • Step 5: In next row select the first UI RadioButtonGroup to configure "V-Orientation" [checked]
     
     
     
 
UI Element - RadioButtonGroup
 
 
Exercise 3: TAB "Data Mapping"
 
  • Step 1: Drag&Drop attribute "person.gender" from TAB "Data" into second span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
 
 
 
UI Element - RadioButtonGroup
 
 
 
  • Step 2:  Select UI RadioButtonGroup and open TAB "Implementation", SubTAB "Element Properties" and check property "V-Orientation"
     
     
     
 
 
 
Exercise 4: TAB "Data Validation"
 
  • Step 1: Drag&Drop attribute "academicLevel" from TAB "Data" into the third free span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
  • Step 2: Open TAB "Implementation", SubTAB "Element Properties" and check V-Orientation property
     
 
 
UI Element - RadioButtonGroup
 
 
  • Step 3: Repeat Step 1 and Step 2 and add Label and RadioButtonGroup for attribute
  • "maritalStatus"
     
     
 
 
 
UI Element - RadioButtonGroup
 
 
 
Exercise 5: TAB "Events" - Action Scripts
 
  • Step 1: Drag&Drop attribute "employment" from TAB "Data" into second free span and keep default in dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
     
 
 
 
UI Element - RadioButtonGroup
 
 
  • Step 2: Repeat Step 1 to add Label and RadioButtonGroup for attributes
  • "musicalGenre"
     
     
    UI Element - RadioButtonGroup
     
     
     
  • Step 3: Select the first UI RadioButtonGroup and open TAB "Implementation" SubTab "Events" to specify event type "onClick"
  • Step 4: 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 - RadioButtonGroup
 
 
 
 
  • Step 5: Repeat Step 3 and 4 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;
 
 
 
 
UI Element - RadioButtonGroup
 
 
Exercise 6: TAB "Events" - Action & Validation Scripts
 
  • Step 1: Select the first UI RadioButtonGroup 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 - RadioButtonGroup
 
 
 
  • Step 3: Repeat Step 1 and 2 for the other UI elements to specify further event types and related event action and validation scripts, which display the related event action at the right side of the UI element.
     
  • action script
  • event type "onDoubleClick"
localData.eventType.onDoubleClickValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_DOUBLE_CLICK_VALID;
 
 
  • validation script "onDoubleClick" event
localData.eventType.isValid
 
 
 
 
 
UI Element - RadioButtonGroup
 
 
 
 
Exercise 7: 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 - RadioButtonGroup
 
 
 
  • Step 2: Select the first RadioButtonGroup and open TAB "Implementation" SubTab "Visibility"
  • Step 3: Click at visibility type "Editable" and select state "Script"
  • Step 4: Implement the visibility script, which toggles the visibility "editable" and "read-only"
 
localData.toggleVisibility
 
 
UI Element - RadioButtonGroup
 
 
  • Step 5: Repeat steps 2..4 for second UI RadioButtonGroup for visibility type  "Visible", which toggles the visibility "visible" and "invisible"
 
 
 
UI Element - RadioButtonGroup
 
 
 
Exercise 8: Link UI Page to Frontend Service Model
 
  • Step 1: Open frontend service model  "Automation/Service/Training/UIM/Exercise/Basic/RadioButtonGroup"
  • Step 2: Select UI page "View Radio ButtonGroup" to open TAB "General", SubTAB "Element"
  • Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "RadioButtonGroup" with double click
     
     
     
     
     
  • Step 4: Right click on button flow to select button "Exit".
     
 
 
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
 
 
 
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "color" from TAB "Data" into second free span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "color" from TAB "Data" into the spans to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
2

Drag&Drop Attribute from TAB "Data"

2. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "color" from TAB "Data" into the span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
3

Drag&Drop Attribute from TAB "Data"

3. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "color" from TAB "Data" into the span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
1

Select UI Element

1. Select UI Element
Click to select UI Element
2

Click Button "Span"

2. Click Button "Span"
Click button "Span" to configure the element H-Alignment
3

Configure Value H-Alignment

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

Configure Label Position

1. Configure Label Position
Select first UI RadioButtonGroup to configure the text before property [checked]
1

Configure V-Orientation

1. Configure V-Orientation
Select first UI RadioButtonGroup to configure the v-orientation property [checked]
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "person.gender" from TAB "Data" into second span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "academicLevel" from TAB "Data" into third span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop BO "maritalStatus" from TAB "Data" into third span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "employment" from TAB "Data" into second free span and keep default in dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop other attribute from TAB "Data" into second span to open dialog "Select Component" to add the corresponding UI Label and UI RadioButtonGroup to the UI page.
1

Select UI Element

1. Select UI Element
Select UI element and open TAB "Events"
2

Select Event Type

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

Enter Action Script

3. Enter Action Script
Enter action script for the selected event type
4

Event Action

4. Event Action
The event action will display at the right side of the element.
1

Select UI Element

1. Select UI Element
Select UI element and open TAB "Events"
2

Select Event Type

2. Select Event Type
Select event type "onDoubleClick"
3

Enter Action Script

3. Enter Action Script
Enter action script for the selected event type
4

Event Action

4. Event Action
The event action will display at the right side of the element
1

Select UI Element

1. Select UI Element
Select UI element and open TAB "Events"
2

Select Event Type

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

Enter Action & Validation Script

3. Enter Action & Validation Script
Enter action & validation script for the selected event type
4

Event Action

4. Event Action
Event Action will be displayed at the right side of the element
 
1

Select UI Element

1. Select UI Element
Select UI element and open TAB "Events"
2

Select Event Type

2. Select Event Type
Select event type "onDoubleClick"
3

Enter Action & Validation Script

3. Enter Action & Validation Script
Enter action & validation script for the selected event type
4

Event Action

4. Event Action
Event action will display at the right side of the element
 
 
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "toggleVisibility" from TAB "Data" into 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 UI element and open TAB "Visibility"
2

Select "Editable" and State "Script"

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

Enter Visibility Script

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

Select UI Element

1. Select UI Element
Select UI element and open TAB "Visibility"
2

Select "Visible" and State "Script"

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

Enter Visibility Script

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