xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

Complete UI Page "CreditRequest" - UI Panels

 
 

Chapter Overview

 
In this training chapter you will complete UI page "CreditRequest", which displays a form to enter required data for requesting a credit.
 
 

Exercise

 
Exercise 1: Add UI Template
 
In this exercise, you will add a UI template, which consists of a H3 title and a span to add a UI panel.
 
  • Step 1: Open UI page "Automation/User Interface/Training/UiPage/CreditRequest" in the model tree
  • Step 2: Drag&drop a layout element template into the left span below the UI panel “Person” to open dialog "SelectTemplate"
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
  • Step 3:  Select UI template "TitlePanelTemplate" with double click or click button "OK"
  • Step 4: Repeat Steps 1 and 2 for the right span below “Last Name” of UI panel “Person”
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
Exercise 2: Add Titles "Home Address" and "Billing Address"
 
  • Step 1: Click at the left H4 element “Enter title…” to open TAB "Implementation", SubTAB "Data Mapping" and then SubTAB "Definition Objects"
  • Step 2: Enter "home" in textfield "Search data" and press key "Enter" to find enumValue "HOME_ADDRESS"
  • Step 3: Drag&drop enum value "HOME_ADDRESS" into "Data Mapping"
  • Step 4: Repeat Steps 1 to 3 for the right H4 element "Enter title..." and enter "billing" to map enum value "BILLING_ADDRESS"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
Exercise 3: Create “AddressPanel” for Home Address
 
In this exercise, you will generate a UI panel from business object "Address" and link it twice as a referenced panel to the UI page to enter the home and billing address of the customer.
 
  • Step 1: Drag&drop layout element referenced panel from the palette into the span below “Home Address” to open dialog "Select or Create UI Panel"
     
 
 
Complete UI Page "CreditRequest" - UI Panels
 
 
 
  • Step 2: Select folder "User Interface/Training/UiPanel" and click button "Create" to open dialog "Create Panel"
 
 
 
Complete UI Page "CreditRequest" - UI Panels
 
 
  • Step 3: Enter model name "AddressPanel" in dialog "Create Panel"
  • Step 4: Mark "Business Object" checked
  • Step 5: Automatically the dialog "Select Business Object" is opened
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
  • Step 6: Select business object (BO) "Address" with double click or click button "Select" in dialog "Select Business Objects"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
  • Step 7: Select row layout "4 + 8" spans
  • Step 8: Click button "Attributes" to open dialog "Configure Attributes"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
  • Step 9: Open TAB "Order Attributes" in dialog "Configure Attributes"
  • Step 10: Select attribute "street" and click button "Up" to move it to first position
  • Step 11: Click button "OK" in dialog "Configure Attributes" to return to dialog "Create Panel"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
  • Step 12: Click button "OK" in dialog "Create Panel" to link the generated referenced UI panel to the UI page
     
    Remark: At this point, the auto mapping feature will detect a multi mapping possibility for attribute "address" and dialog "Multi Mapping" will open.
     
  • Step 13: Select attribute "customer.personData.homeAddress" in dialog "Multi Mapping"
  • Step 14: Click button "Mapping" to map parent attribute "homeAddress" to child attribute "address"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
Exercise 4: Add UI Panel “AddressPanel” for Billing Address
 
In this exercise, you will reuse the generated UI panel "AddressPanel" of the previous exercise and link it to the UI page to enter the billing address of the customer.
 
 
  • Step 1: Drag&drop layout element Referenced UI panel from the palette into the span below “Billing Address” to open dialog "Select or Create UI Panel"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
  • Step 2: Select model "User Interface/Training/UiPanel/AddressPanel" with double click or click button "OK" to add selected UI panel
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
    Remark: At this point, the auto mapping feature will detect a multi mapping possibility for attribute "address" and dialog "Multi Mapping" will open
     
  • Step 13: Select attribute "customer.bilingAddress" in dialog "Multi Mapping"
  • Step 14: Click button "Mapping" to map parent attribute "billingAddress" to child attribute "address"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
Exercise 5: Implement Visibility for Address Panels
 
In this exercise you will implement the visibility "Editable" for both address panels based on boolean attribute "isRequestDialog". The address panels will be editable in user task "Request Credit" and readonly in user task "Verify Credit".
 
  • Step 1: Select referenced UI panel below "Home Address" and open TAB "Implementation", SubTAB "Visibility" to display visibility properties
  • Step 2: Double click at column "State" of property "Editable" and select value "Script" to enable the script area
  • Step 3: Enter script
    localData.customer.creditData.isRequestDialog;
     
  • Step 4: Repeat Steps 1 to 3 for referenced UI panel of "Billing Address"
     
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
Exercise 6: Test UI Page in Preview
 
In this exercise you will test the look&feel of the UI page using the preview feature.
 
  • Step 1: Click button "Preview" in the tool bar to display preview of ui page
     
     
    Complete UI Page "CreditRequest" - UI Panels
     
     
     
    Remark: A new browser TAB will open to display a preview of the ui page
     
     
     
     
     
     
     
    1

    Select Template

    1. Select Template
    Select element template at palette layout.
    2

    Drag&Drop Template

    2. Drag&Drop Template
    Drag&drop a template element into the left span below the “Person” UI Panel
     
    1

    Select Template

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

    Open TAB Definition Objects

    1. Open TAB Definition Objects
    Click at the left H4 element “Enter title…” to open TAB "Implementation", then SubTAB "Data Mapping" and then SubTAB "Definition Objects"
    2

    Search Enum Value

    2. Search Enum Value
    Enter "home" in textfield "Search data" and press key "Enter" to find enumValue "HOME_ADDRESS"
    3

    Drag&Drop Enum Value

    3. Drag&Drop Enum Value
    Drag&drop enumValue "HOME_ADDRESS" into "Data Mapping"
     
1

Select Referenced Panel

1. Select Referenced Panel
Select layout element Referenced UI Panel
2

Drag&Drop Referenced Panel

2. Drag&Drop Referenced Panel
Drag&drop a layout element referenced UI panel from the palette into the span below “Home Address”
 
1

Select Folder

1. Select Folder
Select folder "User Interface/Training/UiPanel
2

Create UI Panel

2. Create UI Panel
Click button "Create" to open dialog "Create Panel"
 
1

Enter Name

1. Enter Name
Enter model name "AddressPanel"
2

Mark "Business Object"

2. Mark "Business Object"
Mark "Business Object" checked
3

Search BO

3. Search BO
Click button "Search" to open dialog "Select Business Object"
 
1

Select BO

1. Select BO
Select business object "Address" with double click or click button "Select"
 
1

Select layout

1. Select layout
Select layout "4 + 8"
2

Configure Attributes

2. Configure Attributes
Click button "Attributes" to open dialog "Configure Attributes"
 
1

Open SubTAB "Order Attributes"

1. Open SubTAB "Order Attributes"
Open SubTAB "Order Attributes" in dialog "Configure Attributes"
2

Select Attribute

2. Select Attribute
Select attribute "street"
3

Move Attribute Up

3. Move Attribute Up
Click button "Up" to move it to first position
4

Save Configuration

4. Save Configuration
Click button "OK" in dialog "Configure Attributes"
 
1

Select Attribute

1. Select Attribute
Select attribute "customer.personData.homeAddress" in dialog "Multi Mapping"
2

Stablish Mapping

2. Stablish Mapping
Click button "Mapping" to map parent attribute "homeAddress" to child attribute "address"
 
1

Select Referenced Panel

1. Select Referenced Panel
Select layout element Referenced UI panel from the palette
2

Drag&Drop Referenced Panel

2. Drag&Drop Referenced Panel
Drag&drop layout element Referenced UI panel from the palette into the span below “Billing Address” to open dialog "Select or Create UI Panel"
 
1

Select UI Panel

1. Select UI Panel
Select model "User Interface/Training/UiPanel/AddressPanel" with double click or click button "OK" to add selected UI panel
 
1

Select Attribute

1. Select Attribute
Select attribute "customer.billingAddress" in dialog "Multi Mapping"
2

Stablish Mapping

2. Stablish Mapping
Click button "Mapping" to map parent attribute "billingAddress" to child attribute "address"
 
1

Select Referenced Panel

1. Select Referenced Panel
Click at Referenced UI Panel of "Home Address" to select it
2

Open TAB "Visibility"

2. Open TAB "Visibility"
Open TAB "Implementation", SubTAB "Visibility" to display visibility properties
3

Select Value Script

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

Enter Script

4. Enter Script
Type localData.customer.creditData.isRequestDialog; on script area
 
1

Display Preview

1. Display Preview
Click button "Preview" in the tool bar to display preview of ui page