xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

UI Element - TextField

 
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 TextField.
 
 
 
TAB "Element Properties"
 
The TAB "Element Properties" contains the configuration for
 
  • UI element value horizontal text alignment (left, center, right)
  • UI element width configuration (percentage, pixel)
  • UI element height configuration (pixel)
  • UI container horizontal alignment (left, center, right)
  • Show internal label (checked, unchecked)
  • Show clear button (checked, unchecked)
     
 
 
 
 
 
TAB "Data Mapping"
 
The TAB "Data Mapping" contains the attribute type related mapping of the UI element
 
  • string
  • string format
  • float
  • float currency
  • float percentage
  • 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".
 
  • string length range
  • string fixed length
  • string default value
  • string regular expression
  • integer out of range
  • float mandatory
  • float range
  • float value
     
     
     
     
     
    TAB "Events"
     
    The TAB "Events" contains the events and related "Action" and "Validation" scripts of the UI element.
     
  • onClick
  • onDoubleClick
  • onBlur
  • onChange
  • onKeyUp
     
    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/readonly
  • visible/invisible
  • mandatory
     
    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 UIM Preview, in the Preview of the Frontend Service Model and optionally in the xAPPnow User Portal.
 
 
Exercise 1: Create UI Page "TextField"
 
  • 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 "TextField" and keep default options for "Default Device", "Default Label" and option "Model Type: UI Page"
  • Step 4: Select option "From: UI Page" to open dialog "Select UI Page"
  • Step 5: Open folder "…/Training/UIM/Template/Basic" to select template "TMPL_TextField" with double click
  • Step 6: Click button "OK" to create the UI page
     
     
 
 
 
 
Exercise 2: TAB "Element Properties"
 
  • Step 1: Drag&Drop attribute "bicycle.color" from TAB "Data" into second free span and keep default in dialog "Select Component" to add the corresponding External UI Label and UI TextField to the UI page.
 
 
 
UI Element - TextField
 
 
  • Step 2: Repeat Step 1 and add Label and TextField for attribute "bicycle.color" to
  • H-Aligment [Center], [Right]
  • UI-Element Width [50%], [100px]
  • UI-Element Height [50px], [100px]
  • Container H-Aligment [Left], [Center], [Right]
  • Show Internal Label [Unchecked], [Checked]
  • Show Clear Button [Unchecked], [Checked]
 
 
 
UI Element - TextField
 
 
  • Step 3: Select each UI TextField and right click to open context menu, click on button "H-Alignment" to configure the values [Left], [Center], [Right]
 
 
 
UI Element - TextField
 
 
 
  • Step 4: In next row select the UI TextField to configure width [50%] and width [100px]
 
 
 
UI Element - TextField
 
 
  • Step 5: Select each UI Textfield to configure height [50px] and height [100px]
 
 
UI Element - TextField
 
 
 
  • Step 6: In row "Container (H-Alignment)" for each UI TextField:
  • Select each UI TextField to configure width [50%].
  • Select container to configure H-Alignment [Left], [Center], [Right] of the UI element
     
     
     
 
UI Element - TextField
 
  • Step 7: In row "Show Internal Label" for second UI TextField:
  • Remove label "Color"
 
 
UI Element - TextField
 
 
b. Select UI TextField and select "Show Internal Label"
 
 
UI Element - TextField
REMARK: Another possibility to define the Internal Label is when doing drag&drop from TAB "Data". You should select "Internal" instead the default value "External"
 
 
 
  • Step 8: In section "Clear Button" for second UI TextField select "Clear Button"
 
 
UI Element - TextField
 
 
 
Exercise 3: TAB "Data Mapping"
 
  • Step 1: Drag&Drop attribute "stockitem.name" from TAB "Data" into second free span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
 
 
 
UI Element - TextField
 
 
 
  • Step 2: Repeat Step 1 to add Label and TextField for attributes
  •  "stockitem.creditCard"
  •  "stockitem.amount"
  •  "stockitem.price"
  •  "stockitem.discount"
  •  "stockitem.quantity"
     
     
     
UI Element - TextField
 
 
 
Exercise 4: TAB "Data Validation"
 
  • Step 1: Drag&Drop attribute "person.name" from TAB "Data" into the third free span of second row and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
     
 
 
UI Element - TextField
 
 
  • Step 2: Repeat Step 1 and add Label and TextField for attributes
  • "person.address"
  • "person.familyName"
  • "person.email"
  • "person.age"
  • "person.height"
  • "person.overWeight"
  • "person.salary"
 
 
 
UI Element - TextField
 
 
 
Exercise 5: TAB "Events" - Action Scripts
 
  • Step 1: Drag&Drop attribute "bus.number" from TAB "Data" into second free span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
     
 
 
 
UI Element - TextField
 
 
  • Step 2: Repeat Step 1 to add Label and TextField for attributes
  • "bus.origin"
  • "bus.destination"
  • "bus.seat"
  • "bus.driver"
     
    UI Element - TextField
     
     
     
  • Step 3: Select the first UI TextField and open TAB "Implementation" SubTab "Events" to specify event type "onClick"
  • Step 4: 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;
                       
 
 
UI Element - TextField
 
 
 
 
  • 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;
 
  • 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;
 
  • event type "onKeyUp"
localData.eventType.onKeyUp = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_KEY_UP;
 
 
 
UI Element - TextField
 
 
Exercise 6: TAB "Events" - Action & Validation Scripts
 
  • Step 1: Select the UI TextField with placeholder "...and click here." 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.issue.id > 5;
 
 
UI Element - TextField
 
 
 
  • 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;
 
  • "onKeyUp" event
localData.eventType.onKeyUpValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_KEY_UP_VALID;
 
  • validation script
  • "onDoubleClick" event
localData.issue.issueName === "NO ERROR";
 
  • "onBlur" event
localData.issue.progress > 15;
 
  • "onChange" event
localData.issue.description === "Description";
 
  • "onKeyUp" event
localData.issue.sprint === "1";
 
 
UI Element - TextField
 
 
Exercise 7: TAB "Events" - Action & Condition Scripts
 
  • Step 1: Select the UI TextField with placeholder "...and click here." 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.onClickCondition = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CLICK_CONDITION;
 
  • condition script "onClick" event
localData.issue.asignee == "Jonas"
 
 
 
UI Element - TextField
 
 
 
Exercise 8: TAB "Visibility"
 
  • Step 1: Drag&Drop attribute "toggleVisibility" from TAB "Data" into the third free span of third row and keep default in dialog "Select Component" to add the corresponding UI Label and UI CheckBox to the UI page.
 
 
UI Element - TextField
 
 
 
  • Step 2: Select the first UI TextField 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 "readonly"
 
localData.toggleVisibility;
 
 
UI Element - TextField
 
 
  • Step 5: Repeat steps 2..4 for second and third UI TextField for visibility type "Visible", and "Mandatory"
 
 
UI Element - TextField
 
 
 
Exercise 9: Set UI Page as submodel of the Frontend Service Model
 
  • Step 1: Open frontend service model "Automation/Service/Training/UIM/Exercise/Basic/TextField"
  • Step 2: Select UI page "View TextField" to open TAB "General", SubTAB "Element"
  • Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "TextField" with double click
     
     
     
     
  • Step 4: Right click on button flow to set label with "Exit" flow.
 
 
 
Exercise 10: 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
     
REMARK: To see the placeholders in textfields you should remove the default values. This should be done to execute the Events correctly
 
  • 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 "bicycle.color" from TAB "Data" into second span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
 
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "bicycle.color" from TAB "Data" into the span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
2

Drag&Drop Attribute from TAB "Data"

2. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "bicycle.color" from TAB "Data" into the span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
3

Drag&Drop Attribute from TAB "Data"

3. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "bicycle.color" from TAB "Data" into second span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
4

Drag&Drop Attribute from TAB "Data"

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

Select UI Element

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

Configure Text H-Alignment

2. Configure Text H-Alignment
Select each UI TextField and right click to open context menu to configure the value H-Alignment [Left], [Center], [Right]
 
1

Configure Element Width

1. Configure Element Width
Select each UI TextField to configure the element width [50%]
2

Configure Element Width

2. Configure Element Width
Select each UI TextField to configure the element width [100px]
1

Select UI Element

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

Configure Element Height

2. Configure Element Height
Select each UI TextField to configure the element width [50px]
1

Select Container

1. Select Container
Click container to configure the element H-Alignment
1

Remove Label Color

1. Remove Label Color
Click button "Remove" to delete the external label
1

Configure Internal Label

1. Configure Internal Label
Select UI TextField and select "Show Internal Label"
1

Configure Clear Button

1. Configure Clear Button
In section "Clear Button" for second UI TextField select "Clear Button"
1

Drag&Drop Attribute from TAB "Data"

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

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop other attributes of BO "stockitem" from TAB "Data" into second span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
 
1

Drag&Drop Attribute from TAB "Data"

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

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop other attributes of BO "bus" from TAB "Data" into second span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField to the UI page.
 
1

Drag&Drop Attribute from TAB "Data"

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

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop other attributes of BO "person" from TAB "Data" into second span and keep default in dialog "Select Component" to add the corresponding UI Label and UI TextField 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 is displayed at the right side of the corresponding UI 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", "onBlur", "onChange"
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 is displayed at the right side of the corresponding UI 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
The event action is displayed at the right side of the corresponding UI 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", "onBlur", "onChange", "onKeyUp"
3

Select UI Element

3. Select UI Element
Enter action & validation script for the selected event type
4

Event Action

4. Event Action
The event action is displayed at the right side of the corresponding UI 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 "editable" and "readonly"
 
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"