xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

UI Element - File Upload

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

Chapter Overview

 
In this training chapter you get familiar with the configuration possibilities of the UI Element File Upload.
 
 
 
TAB "Element Properties"
 
The TAB "Element Properties" contains the configuration for
 
  • value horizontal alignment (left, center, right)
  • UI element width configuration (percentage, pixel)
  • UI container horizontal alignment (left, center, right)
  • UI element height configuration (pixel)
  • UI container vertical alignment (top, middle, botton)
  • UI element filename (before, after, hidden)
  • UI drop element (default, selected)
     
     
     
    UI Element - File Upload
 
 
 
 
TAB "Data Mapping"
 
The TAB "Data Mapping" contains the attribute type related mapping of the UI element and the button label configuration
 
  • file
  • default label
  • custom label
     
     
     
     
     
     
    TAB "Data Validation"
     
    The TAB "Data Validation" contains the attribute type related validation based on the configuration specified in SubTAB "File Configuration".
     
  • image
  • audio
  • video
  • other
     
     
     
     
     
     
    TAB "Events"
     
    The TAB "Events" contains the events and related "Action" and "Validation" scripts of the UI element.
     
  • onClick
  • onFileUploaded
     
     
    For each UI element the related event action is displayed at the right side of the UI element. In case of a validation error a default error message is displayed at the top right of the UI page and the action script is not executed.
     
     
     
     
     
     
 
TAB "Visibility"
 
The TAB "Visibility" contains the visibility configuration and the "Visibility" scripts of the UI element.
 
  • enabled/disabled
  • 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 "FileUpload"
 
  • Step 1: Open context menu of folder "Automation/User Interface/Training/UIM/Exercise/Basic" in the model tree
  • Step 2: Select menu function "Create Model" to open dialog "Create User Interface Model"
  • Step 3: Enter model name "FileUpload" 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/Basic" to select template "TMPL_FileUpload" 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: Drag&Drop UI File upload element from palette into second free span
     
     
     
    UI Element - File Upload
     
     
  • Step 2: Repeat Step 2 and drag&drop UI File upload to
  • H-Aligment [Center], [Right]
  • Width [50%], [100px]
  • Container H-Alignment [Left], [Center], [Right]
  • Height [50px], [25px]
  • Container V-Alignment [Top], [Middle], [Bottom]
  • File Name [Filename before (True)], [Filename before (False)], [Show Filename (False)]
  • Drop Element [Default], [Selected]
     
     
     
    UI Element - File Upload
     
     
     
  • Step 3: Open TAB "Implementation" SubTab "Element Properties" and select each UI File upload to configure the value H-Alignment [Left], [Center], [Right]
     
     
     
    UI Element - File Upload
     
     
  • Step 4: In next row select the UI File upload to configure width [50%] and width [100px]
     
     
     
    UI Element - File Upload
     
     
  • Step 5: Select each UI File upload of the next row to configure width [50%]. Then select each of them again and click at button "Span" to configure H-Alignment [Left], [Center], [Right] of the UI element
     
     
     
    UI Element - File Upload
     
     
  • Step 6: Select each UI File upload of next section to configure height [50px] and height [25px]
     
     
     
     
     
    UI Element - File Upload
     
     
     
  • Step 7: Select each UI File upload of the next row to configure height [25px]. Then select each of them again and click at button "Span" to configure V-Alignment [Top], [Middle], [Bottom] of the UI element
     
     
     
    UI Element - File Upload
     
     
     
     
  • Step 8: Select first UI File upload of the next row and check option "Text Before" to display the file name before the UI Element
 
 
 
UI Element - File Upload
 
 
  • Step 9: Select second UI File upload of the row to display the file name configuration default values
     
     
     
    UI Element - File Upload
     
     
     
  • Step 10: Select third UI File upload of the row and uncheck option "Show Filename" to hide the file name
     
     
    UI Element - File Upload
     
     
  • Step 11: Select first UI File upload of the next row to display the drop element configuration default value
     
     
     
     
     
    UI Element - File Upload
     
  • Step 12 Select second UI File upload of the next and check option "Drop Element" to enable drop element of the UI Element
     
     
    UI Element - File Upload
     
     
     
Exercise 3: TAB "Data Mapping"
 
  • Step 1: Drag&Drop attribute "personalWarehouse.degreeCopy" from TAB "Data" into second free span of first row to open dialog "Select Component" to add the corresponding UI File upload and uncheck property "Create label"
     
     
 
UI Element - File Upload
 
 
 
  • Step 2: Repeat Step 1 to add UI File upload for attributes
  •  "personalWarehouse.univGrades"
  •  "personalWarehouse.idPicture"
     
     
    UI Element - File Upload
     
  • Step 3: Select third UI File upload and open TAB "Implementation" SubTab "Data Mapping" and SubTab "Definition Objects".
  • Step 4: Search "SelectLabel" definition object and map "SELECT_IMAGE" enum value on field "Label "Select File"".
  • Step 5: Map "CHANGE_IMAGE" enum value on field "Label "Change File"".
     
     
     
    UI Element - File Upload
     
     
     
Exercise 4: TAB "Data Validation"
 
  • Step 1: Drag&Drop attribute "personalWarehouse.photo" from TAB "Data" into the second free span of second row to open dialog "Select Component" to add the corresponding UI File upload to the UI page and uncheck property "Create label"
     
     
     
    UI Element - File Upload
     
     
  • Step 2: Repeat Step 1 to add UI File upload for attributes
  •  "personalWarehouse.audio"
  •  "personalWarehouse.video"
  • "personalWarehouse.other"
     
     
    UI Element - File Upload
     
  • Step 3: Select first UI File upload and open TAB "Implementation", SubTAB "File Configuration" to select value "Image" from the ComboBox
     
     
    UI Element - File Upload
     
     
  • Step 4: Repeat Step 3 for the rest of the elements
  • for "personalWarehouse.audio" select file type "Audio"
  • for "personalWarehouse.video" select file type "Video"
  • for "personalWarehouse.other" keep default file type "Other"
     
     
     
Exercise 5: TAB "Events" - Action Scripts
 
  • Step 1: Drag&Drop attribute "personalWarehouse.cv" from TAB "Data" into free span to open dialog "Select Component" to add the corresponding UI File upload to the UI page and uncheck property "Create label"
     
 
 
UI Element - File Upload
 
 
 
  • Step 2: Repeat Step 1 to add UI File upload for attribute
  • "personalWarehouse.birthCertificate"
     
     
    UI Element - File Upload
     
     
     
     
  • Step 3: Select the first UI File upload and open TAB "Implementation" SubTab "Events" to specify event type "onClick"
  • Step 4: Implement the action script, which displays the related event action at the right side of the UI element.
 
localData.eventType.onClick = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CLICK;
 
 
 
UI Element - File Upload
 
 
 
  • Step 5: Repeat Step 3 and 4 for the other UI element to specify further event types and related action scripts, which display the related event action at the right side of the UI element.
     
  • event type "onFileUploaded"
localData.eventType.onFileUpload = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_FILE_UPLOAD;
 
 
 
 
 
 
Exercise 6: TAB "Events" - Action & Validation Scripts
 
  • Step 1: Select the first UI File upload and open TAB "Implementation", SubTab "Events" to specify event type "onClick"
  • Step 2: Implement the action the validation scripts, which display the related event action at the right side of the UI element in case of no validation error.
     
  • action script "onClick" event
localData.eventType.onClickValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_CLICK_VALID;
 
  • validation script "onClick" event
localData.eventType.isValid
 
 
 
 
 
UI Element - File Upload
 
 
 
  • Step 3: Repeat Step 1 and 2 for the other UI element to specify further event types and related action and validation scripts, which display the related event action at the right side of the UI element.
     
  • action script
  • "onFileUploaded" event
localData.eventType.onFileUploadValid = globalDef.enums.Tutorial.UIM.DEF.EventMessage.ON_FILE_UPLOAD_VALID;
 
 
  • validation script
  • "onFileUploaded" event
localData.eventType.isValid
 
 
 
 
 
 
 
Exercise 7: TAB "Visibility"
 
  • Step 1: Drag&Drop attribute "toggleVisibility" from TAB "Data" into the third free span of third row to open dialog "Select Component" to add the corresponding UI Label and UI CheckBox to the UI page.
     
     
     
    UI Element - File Upload
     
     
     
  • Step 2: Select the first UI File upload and open TAB "Implementation" SubTab "Visibility"
  • Step 3: Click at visibility type "Enabled" and select state "Script"
  • Step 4: Implement the visibility script, which toggles the visibility "enabled" and "disabled"
 
localData.toggleVisibility
 
UI Element - File Upload
 
 
 
  • Repeat steps 2..4 for second UI File Upload for visibility type "Visible", which toggles the visibility "visible" and "invisible"
     
     
     
     
     
     
Exercise 8: Set UI Page as submodel of the Frontend Service Model
 
  • Step 1: Open frontend service model  "Automation/Service/Training/UIM/Exercise/Basic/FileUpload"
  • Step 2: Select UI page "View FileUpload" to open TAB "General", SubTAB "Element"
  • Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "FileUpload" with double click
     
     
     
     
     
     
  • Step 4: Right click on button flow to set label with "Exit" flow.
 
 
 
 
 
 
Exercise 9: 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 test the UI page in User Portal
 
 
 
 
1

Drag&Drop UI File upload from Palette

1. Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into second free span
 
1

Drag&Drop UI File upload from Palette

1. Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
2

Drag&Drop UI File upload from Palette

2. Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
3

Drag&Drop UI File upload from Palette

3. Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
4

Drag&Drop
UI File upload
from Palette

4. Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
5

Drag&Drop UI File upload from Palette

5. Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
 
1

Configure Value H-Alignment

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

Select UI Element

1. Select UI Element
Select UI File upload element
2

Configure UI Element Width

2. Configure UI Element Width
Configure width [50%] and width [100px], accordingly
 
1

Click Button "Span"

1. Click Button "Span"
Click at button "Span"
2

Configure H-Alignment

2. Configure H-Alignment
Configure H-Alignment [Left], [Center], [Right] of the UI element
 
1

Select UI Element

1. Select UI Element
Select each UI File upload of Heigh section
2

Configure UI Element Height

2. Configure UI Element Height
Configure UI Element height in px
 
1

Click Button "Span"

1. Click Button "Span"
Click at button "Span"
2

Configure V-Alignment

2. Configure V-Alignment
Configure V-Alignment [Top], [Middle], [Bottom] of the UI element
 
1

Select UI Element

1. Select UI Element
Select UI File upload to configure file name position
2

Check Option "Text Before"

2. Check Option "Text Before"
Check option to display file name before the UI Element
1

Select UI Element

1. Select UI Element
Select UI File upload to display default values for file name configuration
2

Default Filename Configuration

2. Default Filename Configuration
Notice the default values for file name configuration
1

Select UI Element

1. Select UI Element
Select UI File upload to configure file name visibility
2

Uncheck Option "Show Filename"

2. Uncheck Option "Show Filename"
Uncheck option "Show Filename" to hide file name on the UI Element
1

Select UI Element

1. Select UI Element
Select UI File upload to display default value for drop element configuration
2

Default Value

2. Default Value
Notice the default value for drop element configuration
1

Select UI Element

1. Select UI Element
Select UI File upload to configure drop element
2

Check Option "Drop Element"

2. Check Option "Drop Element"
Check option to set drop element enabled
 
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "personalWarehouse.degreeCopy" from TAB "Data" into second free span of first row
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attributes from TAB "Data" into free spans
1

Select UI Element

1. Select UI Element
Select third UI File upload and open TAB "Implementation" SubTab "Data Mapping" and SubTab "Definition Objects"
2

Search Attribute

2. Search Attribute
Search "SelectLabel" definition object
3

Map "Select File"

3. Map "Select File"
Map "SELECT_IMAGE" enum value on field "Label "Select File"".
4

Map "Change File"

4. Map "Change File"
Map "CHANGE_IMAGE" enum value on field "Label "Change File"".
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag&Drop attribute "personalWarehouse.photo" from TAB "Data" into the second free span of second row to open dialog "Select Component" to add the corresponding UI File upload to the UI page and uncheck property "Create label"
1

Drag&Drop Attributes from TAB "Data"

1. Drag&Drop Attributes from TAB "Data"
Drag&Drop attributes from TAB "Data" into free spans
1

Select UI Element

1. Select UI Element
Select first UI File upload and open TAB "Implementation", SubTAB "File Configuration"
2

Select File Type

2. Select File Type
Select File Type for the selected element
1

Drag&Drop Attribute from TAb "Data"

1. Drag&Drop Attribute from TAb "Data"
Drag&Drop attribute "personalWarehouse.cv" from TAB "Data" into free span to open dialog "Select Component" to add the corresponding UI File upload to the UI page and uncheck property "Create label"
1

Drag&Drop Attribute from TAB "Data"

1. Drag&Drop Attribute from TAB "Data"
Drag& Drop attribute "personalWarehouse.birthCertificate" from TAB "Data" into free span
1

Select UI Element

1. Select UI Element
Select first UI File upload and open TAB "Implementation", SubTAB "Events"
2

Specify Event Type

2. Specify Event Type
Specify event type "onClick"
3

Enter Action Script

3. Enter Action Script
Implement the action script
4

Event Action

4. Event Action
Displays the related event action at the right side of the UI element.
1

Select UI Element

1. Select UI Element
Select the first UI File upload and open TAB "Implementation", SubTab "Events"
2

Specify Event Type

2. Specify Event Type
Specify event type "onClick"
3

Enter Action&Validation Scripts

3. Enter Action&Validation Scripts
Implement the action script and validation script
4

Event Action

4. Event Action
Displays the related event action at the right side of the UI element.
1

Drag&Drop from TAB "Data"

1. Drag&Drop from TAB "Data"
Drag&Drop attribute "toggleVisibility" from TAB "Data" into the third free span of third row to open 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 the first UI File upload and open TAB "Implementation" SubTab "Visibility"
2

Select "Enabled" and State "Script"

2. Select "Enabled" and State "Script"
Click at visibility type "Enabled" and select state "Script"
3

Enter Visibility Script

3. Enter Visibility Script
Implement the visibility script, which toggles the visibility "enabled" and "disabled"