xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

Create UI Page "EnterData"

 
 

Chapter Overview

 
In this training chapter you will create a UI Page "EnterData" which contains, two headings, two textfields with their labels to enter values for firstName and lastName and a button "OK" to move to the second UI Page
 
 
Create UI Page "EnterData"
 
 
 

Exercise

 
In this exercise you will create a UI Page "EnterData" with a heading, two labels, two textfields and a button with a flow to a next UI Page.
 
 
 
Exercise 1: Create User Interface Model "EnterData"
 
  • Step 1: On model "Automation/Service/Training/HelloWorld" select UI Page element "Enter User Data" and open Sub TAB "Element"
  • Step 2: Click button "Search" to open dialog "Select or Create Submodel"
 
 
 
Create UI Page "EnterData"
 
 
  • Step 3: Select folder "Automation/User Interface/Training/UiPage" and click button "Create (UI Page)" to open dialog "Create User Interface Model"
 
 
 
Create UI Page "EnterData"
 
 
 
  • Step 4: Enter model name "EnterData" and select option "From: Template" to open dialog "Select Template"
 
 
 
Create UI Page "EnterData"
 
  • Step 5: Select template "Automation/User Interface/Training/UiTemplate/HelloWorld" with double click or click button "Select" and then click button "OK"
 
 
Create UI Page "EnterData"
 
 
 
 
Exercise 2: Complete User Interface Model "EnterData"
 
  • Step 6: Open TAB "Data", Sub TAB "Business Object"
  • Step 7: Enter "person" in textfield "Search data" and press key "Enter" to find business object "Person"
  • Step 8: Drag&drop business object "Person" into TAB "Data"
  • Step 9: Decollapse business object "person", drag&drop attribute "firstName" into second span of fifth row to open dialog "Select Component" and click button "OK"
 
 
Create UI Page "EnterData"
 
 
 
 
 
 
 
  • Step 10: Repeat step 9 for attribute "lastName" and drag&drop into second span of sixth row.
 
 
 
 
  • Step 11: Click on Toolbar button "Back To Parent" to return to the mobile app model
     
 
 
Create UI Page "EnterData"
 
 
 
1

Select UI Page "Enter Data"

1. Select UI Page "Enter Data"
Click to select the UI Page "Enter Data"
2

Display Sub TAB "Element"

2. Display Sub TAB "Element"
Click to display element properties
3

Click Button "Search"

3. Click Button "Search"
Click button "Search" to open dialog "Select or Create Submodel"
 
1

Select Folder "UiPage"

1. Select Folder "UiPage"
Click to select the folder "Training" as the location for the user interface model
2

Click Button "Create (UI Page)"

2. Click Button "Create (UI Page)"
Click button "Create (UI Page)" to open dialog "Create User Interface Model"
 
1

Enter Model Name

1. Enter Model Name
Enter model name "EnterData"
2

Select From "Template"

2. Select From "Template"
Select option from "Template" to open dialog "Select Template"
3

Click Button "OK"

3. Click Button "OK"
Click button "OK" to create the user interface model
 
1

Select Template

1. Select Template
Select template "Automation/User Interface/Training/UiTemplate/HelloWorld" with double click or click button "Select"
 
1

Drag&drop Heading 3

1. Drag&drop Heading 3
Drag&Drop element Heading 3 from palette into the fourth row
2

Define Label

2. Define Label
Open TAB "Implementation" Sub TAB "User Interface" to enter Label "Enter your name"
 
1

Drag attribute "firstName"

1. Drag attribute "firstName"
Drag attribute "firstName" from Tab "Data"
2

Drop attribute "firstName"

2. Drop attribute "firstName"
Drop attribute "firstName"  into third span of fifth row to open dialog "Select Component"
 
 
1

Drag&Drop Button

1. Drag&Drop Button
Drag&Drop element Button from palette into the last row, third span
2

Select Flow
Type

2. Select Flow Type
Double click on Flow for the onClick event and select "Flow"
3

Enter Flow
Label

3. Enter Flow Label
Enter flow label "OK"
 
1

Open Sub TAB "User Interface"

1. Open Sub TAB "User Interface"
Click to open Sub TAB "User Interface"
2

Enter Button Label

2. Enter Button Label
Enter label "OK" and press Enter key
 
 
1

Click Button "Back To Parent"

1. Click Button "Back To Parent"
Click on Toolbar button "Back To Parent" to return to the mobile app model