xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

Create UI Page "DisplayData"

 
 

Chapter Overview

 
In this training chapter you will create a UI Page "DisplayData" containing two textfields, and a button to move to the previous UI Page.
 
 
 
 
 
 

Exercise

 
In this exercise you will create a UI Page "DisplayData" with two textfields to display the first name and last name.
 
 
 
Exercise 1: Create User Interface Model "DisplayData"
 
  • Step 1: On model "Automation/Service/Training/HelloWorld" select UI Page element "Display User Data" to open Sub TAB "Element"
  • Step 2: Click button "Search" to open dialog "Select or Create Submodel"
 
 
 
Create UI Page "DisplayData"
 
 
  • 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 "DisplayData"
 
 
 
  • Step 4: Enter model name "DisplayData" and select option "From: UI Page" to open dialog "Select Template"
 
 
Create UI Page "DisplayData"
 
 
  • Step 5: Select template "Automation/User Interface/Training/UiPage/EnterData" with double click or click button "Select" and then click button "OK"
 
 
Create UI Page "DisplayData"
 
 
Exercise 2: Design layout of UI Page "DisplayData"
 
  • Step 6: Select each label and remove them from fifth and sixth rows using button to delete them
 
 
Create UI Page "DisplayData"
 
 
  • Step 7: Move textfield of fifth row to the first span of the sixth row
     
     
    Create UI Page "DisplayData"
     
     
  • Step 8: Select first textfield, open TAB "Element Properties" and select H-Alignment "Right"
     
 
Create UI Page "DisplayData"
 
 
  • Step 9: Select Heading "HELLO WORLD!", open TAB "Implementation", Sub TAB "User Interface", enter Label "Say hello to..." and press key "Enter" to change title
     
     
Create UI Page "DisplayData"
 
 
 
  • Step 10: Click on Toolbar button "Back To Parent" to return to the mobile app model
 
 
Create UI Page "DisplayData"
 
 
 
 
1

Select UI Page "Display Data"

1. Select UI Page "Display Data"
Click to select the UI Page "Display 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 "Training"

1. Select Folder "Training"
Select folder "Automation/User Interface/Training/UiPage" and click button "Create (UI Page)" to open dialog "Create 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 "DisplayData"
2

Select option "From"

2. Select option "From"
Select option "From: UI Page" to open dialog "Select UI Page"
3

Click Button "OK"

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

Select UI Page

1. Select UI Page
Select UI Page "EnterData" with double click or click button "Select"
1

Remove Labels

1. Remove Labels
Remove labels from fifth and sixth rows
 
1

Move Textfield

1. Move Textfield
Move textfield of fifth row to the first span of the sixth row
 
1

Select H-Alignment "Right"

1. Select H-Alignment "Right"
Select first textfield, open TAB "Element Properties" and select H-Alignment "Right"
1

Change Title

1. Change Title
Select Heading "Hello World", open TAB "Implementation", Sub TAB "User Interface", enter Label "Say hello to..." and press key "Enter" to change title
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