xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

Complete UI Page "CreditRequest" - UI Elements

 

Chapter Overview

 
In this training chapter you will add various UI elements to UI page "CreditRequest", which displays a form to enter required data for a credit request.
 
 

Exercise

 
Exercise 1: Add UI Element for "Monthly Salary"
 
  • Step 1: Open UI page "Automation/User Interface/Training/UiPage/CreditRequest" in the model tree
  • Step 2: Drag&drop basic element "Label" into the first free span of the left below title "Customer Credit Request"
 
 
Complete UI Page "CreditRequest" - UI Elements
 
 
 
  • Step 3: Drag&drop basic element "TextField" into the span next to the label element
 
 
 
Complete UI Page "CreditRequest" - UI Elements
 
 
 
  • Step 4: Select textfield element to open TAB "Implementation" and then SubTAB "DataMapping"
  • Step 5: Enter "salary" in textfield "Search data" and press key "Enter" to find attribute "monthlySalary"
  • Step 6: Drag&drop attribute "monthlySalary"  into field "Data Mapping"
 
 
Complete UI Page "CreditRequest" - UI Elements
 
 
 
  • Step 7: Open SubTAB "Visibility" to display visibility properties
  • Step 8: Double click at column "State" of property "Editable" and select value "Script" to enable the script area
  • Step 9: Enter script:
localData.customer.creditData.isRequestDialog;
 
 
 
Complete UI Page "CreditRequest" - UI Elements
 
 
 
Exercise 2: Add "Salutation" on referenced UI Panel "PersonPanel"
 
In this excercise you will add a combobox and a label for "Salutation"  to a referenced UI panel by drag&drop the related attribute from TAB "Data" into a free span of the UI page.
 
 
  • Step 1: Double click at referenced UI panel "Referenced Panel" to navigate to UI panel "Automation/User Interface/Training/UiPanel/PersonPanel"
     
                  
     
    Complete UI Page "CreditRequest" - UI Elements
     
     
     
  • Step 2: Open TAB "Data" and select attribute "person.title"
  • Step 3: Drag&drop attribute "title" to second free span from the left to open dialog "Select Component"
     
     
     
    Complete UI Page "CreditRequest" - UI Elements
     
     
     
  • Step 4: Keep selected UI component "ComboBox" and marked checkbox "Create Label" to define the UI components for attribute "title"
  • Step 5: Click button "OK" to create the UI components
 
Remark: The label will be added to the free span at the left side of the selected component. Therefore, this additional free span is required.
 
 
Complete UI Page "CreditRequest" - UI Elements
 
 
 
  • Step 6: Click button "Back to Parent Model“ in the toolbar to navigate back to parent model "CreditRequest"
     
     
     
    Complete UI Page "CreditRequest" - UI Elements
     
 
 
 
1

Select Label

1. Select Label
Select element Label on basic elements palette.
2

Drag&Drop element Label

2. Drag&Drop element Label
Drag&Drop element Label into free span
 
1

Select TextField

1. Select TextField
Select element TextField on basic elements palette.
2

Drag&Drop element TextField

2. Drag&Drop element TextField
Drag&Drop element TextField into free span
 
1

Open SubTAB "Data Mapping"

1. Open SubTAB "Data Mapping"
Click at SubTAB "DataMapping"
2

Search Attribute

2. Search Attribute
Enter "salary" in textfield "Search data" and press key "Enter" to find attribute "monthlySalary"
3

Select Attribute

3. Select Attribute
Select attribute "monthlySalary"
4

Map Attribute

4. Map Attribute
Drag&drop attribute "monthlySalary"  into "Data Mapping"
 
1

Open SubTAB Visibility

1. Open SubTAB Visibility
Open SubTAB "Visibility" to display visibility properties
2

Select Value Script

2. Select Value Script
Double click at column "State" of property "Editable" and select value "Script" to enable the script area
3

Enter Script

3. Enter Script
Enter script localData.customer.creditData.isRequestDialog
 
1

Navigate to Referenced UI Panel

1. Navigate to Referenced UI Panel
Double click at referenced UI panel "Referenced Panel" to open UI panel "Automation/User Interface/Training/UiPanel/PersonPanel"
 
1

Open TAB "Data"

1. Open TAB "Data"
Open TAB "Data"
2

Select Attribute

2. Select Attribute
Select attribute "title" from object "Person"
3

Drag&Drop Attribute

3. Drag&Drop Attribute
Drag&drop attribute "title" to second free span from the left
 
1

Select UI Component

1. Select UI Component
Keep selected UI component "ComboBox" on "Select Component" dialog
2

Mark Create Label

2. Mark Create Label
Keep marked checkbox "Create Label"
3

Add UI Component

3. Add UI Component
Click button "OK" to create the UI components
 
1

Navigate to Parent

1. Navigate to Parent
Click button "Back to Parent Model“ in the tool bar to navigate back to parent model "CreditRequest"