xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

UI Element - iFrame

 
Related subfolder of the training project: "Training/UIM/Exercise/Advanced"
 
 

Chapter Overview

 
In this training chapter you get familiar with the configuration possibilities of the UI Element iFrame.
 
 
 
TAB "Element Properties"
 
The TAB "Element Properties" contains the configuration for
 
  • UI container horizontal alignment (left, center, right)
  • UI element width configuration (percentage, pixel)
  • UI element height configuration (pixel)
  • UI element scrolling (checked, unchecked)
  • UI element frame borders (checked, unchecked)
     
 
 
 
 
 
TAB "Data Mapping"
 
The TAB "Data Mapping" contains the attribute type related mapping of the UI element
 
  • file
 
 
 
 
 
 
 
 
TAB "Visibility"
 
The TAB "Visibility" contains the visibility configuration and the "Visibility" scripts of the UI element.
 
  • visible/invisible
     
    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 UI Page Preview, in the Preview of the Frontend Service Model and optionally in the xAPPnow User Portal.
 
 
Exercise 1: Create UI Page "iFrame"
 
  • Step 1: Open context menu of folder "Automation/User Interface/Training/UIM/Exercise/Advanced" in the model tree
  • Step 2: Select menu function "Create Model" to open dialog "Create User Interface Model"
  • Step 3: Enter model name "iFrame" and keep option "Model Type: UI Page"
  • Step 4: Select option "From: UI Page" to open dialog "Select UI Page", open folder "…/Training/UIM/Template/Advanced" to select template "TMPL_iFrame" with double click then keep default option for "Default Device" and click button "OK" to create the UI page
     
     
 
 
 
 
Exercise 2: TAB "Element Properties"
 
  • Step 1: In row "Container (H-Alignment)" for each UI iFrame:
  • Select each UI iFrame to configure width [50%].
  • Select button "Span" to configure H-Alignment [Left], [Center], [Right] of the UI element
     
     
     
    UI Element - iFrame
     
 
 
 
  • Step 2: In next row select the UI iFrame to configure width [50%] and width [250px]
 
 
 
UI Element - iFrame
 
 
  • Step 3: In row "Height" select the UI iFrame to configure height [100px] and height [250px]
     
     
     
     
 
UI Element - iFrame
 
 
  • Step 4: In next row select the second UI iFrame to configure "Scrolling" [unchecked]
 
 
 
 
UI Element - iFrame
 
 
  • Step 5: In next row select the second UI iFrame to configure "Frame Borders" [checked]
 
 
 
 
UI Element - iFrame
 
 
 
Exercise 3: TAB "Data Mapping"
 
 
  • Step 1: Drag&Drop attribute "briefcase.documents" from TAB "Data" into second free span to open dialog "Select Component" and select "iFrame" and unmark option "Create Label" to add the corresponding UI iFrame to the UI page.
     
     
     
     
     
     
UI Element - iFrame
 
 
 
 
Exercise 4: TAB "Visibility"
 
  • Step 1: Drag&Drop attribute "toggleVisibility" 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 CheckBox to the UI page.
 
 
UI Element - iFrame
 
 
 
  • Step 2: Select the first UI iFrame and open TAB "Implementation" SubTab "Visibility"
  • Step 3: Click at visibility type "Visible" and select state "Script"
  • Step 4: Implement the visibility script, which toggles the visibility "visible" and "invisible"
 
localData.toggleVisibility
 
 
UI Element - iFrame
 
 
 
 
 
Exercise 5: Set UI Page as submodel of the Frontend Service Model
 
  • Step 1: Open frontend service model "Automation/Service/Training/UIM/Exercise/Advanced/iFrame"
  • Step 2: Select UI page "Display File" to open TAB "General", SubTAB "Element"
  • Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "iFrame" with double click 
     
     
     
  • Step 4: Right click on button flow to set label with "Exit" flow.
 
 
 
 
 
Exercise 6: Set Frontend Service Model as submodel of the Business Process
 
  • Step 1: Open business process model "Automation/Business Process/Training/UIM/Exercise/Advanced/iFrame"
  • Step 2: Select each user task to open TAB "General", SubTAB "Element"
  • Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select user flow diagram "iFrame" with double click 
 
 
 
 
Exercise 7: 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
  • Step 2: Optionally publish the frontend service model and business process and test the UI page in User Portal
     
 
 
1

Configure "Container (H-Alignment)"

1. Configure "Container (H-Alignment)"
In row "Container (H-Alignment)" for each UI iFrame select button "Span" to configure H-Alignment [Left], [Center], [Right] of the UI element
1

Configure Value H-Alignment

1. Configure Value H-Alignment
Open TAB "Element Properties" and select each UI iFrame to configure the value H-Alignment [Left], [Center], [Right]
1

Configure Element Width

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

Configure Element Width

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

Configure Element Height

1. Configure Element Height
Select each UI iFrame to configure the element height [100px]
2

Configure Element Height

2. Configure Element Height
Select each UI iFrame to configure the element height [200px]
1

Configure Scrolling

1. Configure Scrolling
Select the second UI iFrame to configure "Scrolling" [unchecked]
1

Configure Frame Borders

1. Configure Frame Borders
Select the second UI iFrame to configure "Frame Borders" [checked]
1

Drag&Drop UI iFrame from Palette

1. Drag&Drop UI iFrame from Palette
Drag&Drop UI iFrame from palette into second free span to configure a "Static iFrame" to the UI page.
1

Select Static iFrame

1. Select Static iFrame
Select the file "xAPPnow_Logo" and click on button "Select" or double click over "xAPPnow_Logo" to select static iFrame.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "briefcase.documents" from TAB "Data" into second free span to open dialog "Select Component" and select "iFrame" to add the corresponding UI iFrame to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "ocean" from TAB "Data" into second span to open dialog "Select Component" to add the corresponding UI Label and UI iFrame to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop BO "continent" from TAB "Data" into second span to open dialog "Select Component" to add the corresponding UI Label and UI iFrame to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "month" from TAB "Data" into second span to open dialog "Select Component" to add the corresponding UI Label and UI iFrame to the UI page.
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop other attributes from TAB "Data" into second span to open dialog "Select Component" to add the corresponding UI Label and UI iFrame to the UI page.
1

Open Dialog Select iFrame

1. Open Dialog Select iFrame
Select the UI iFrame and open TAB "Implementation" SubTab "Element Properties", click button URL to open dialog "Select iFrame"
 
1

Select UI Element

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

Event Action

2. Event Action
The event action is displayed at the right side of the corresponding UI element
3

Select Event Type

3. Select Event Type
Select event type "onClick"
4

Enter Action Script

4. Enter Action Script
Enter action script for the selected event type
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 "onDoubleClick"
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 "onDoubleClick"
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

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 "Enabled" and State "Script"

2. Select "Enabled" 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"
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"