UI Element – File Upload
Menu
Index
Search
To properly display this page you need a browser with JavaScript support.
Search
-
Previous page
-
Next page
Mục lục bài viết
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)
TAB
“Data Mapping”
The TAB
“Data Mapping”
contains the attribute type related mapping of the UI element and the button label configuration
-
file
file
-
default label
default label
-
custom 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
image
-
audio
audio
-
video
video
-
other
other
TAB
“Events”
The TAB
“Events”
contains the events and related
“Action”
and
“Validation”
scripts of the UI element.
-
onClick
onClick
-
onFileUploaded
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
enabled/disabled
-
visible/invisible
visible/invisible
For each UI element the visibility can be changed by the checkbox
“Visibility Toggle”
.
Exercise
UI element by completing the UI TABs as described above. You can test the implementation in UI Page Preview, in the Preview of the Appollo User Portal.
In this exercise you will get familiar with the configuration possibilities of theby completing the UI TABs as described above. You can test the implementation in, in theof the
Frontend Service Model
and optionally in the
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 1: Open context menu ofin the model tree
-
Step 2: Select menu function
“Create Model”
to open dialog
“Create User Interface Model”
Step 2: Selectto open dialog
-
Step 3: Enter model name
“FileUpload”
and keep option
“Model Type: UI Page”
Step 3: Enter model nameand keep option
-
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
Step 4: Select optionto open dialog, open folderto selectwith double click then keep default option forand clickto create the UI page
Exercise 2: TAB
“Element Properties”
-
Step 1:
Drag&Drop UI File upload element from palette into second free span
Drag&Dropelement from palette into second free span
-
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]
-
Step 3: Open
TAB
“Implementation”
SubTab
“Element Properties” and select each UI
File upload
to configure the value H-Alignment
[Left], [Center], [Right]
-
Step 4: In next row select the UI
File upload
to configure width
[50%] and
width
[100px]
-
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
-
Step 6: Select
each UI
File upload
of next section to configure height
[50px] and
height
[25px]
-
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
-
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
-
Step 9: Select second UI File upload of the row
to display the file name configuration
default values
values
-
Step 10: Select third UI File upload of the row and uncheck option “
Show Filename”
to hide the file name
-
Step 11: Select first UI File upload of the next row to display the drop element configuration
default value
value
-
Step 12 Select second UI File upload of the next and check option “
Drop Element”
to enable
drop element of the UI Element
drop element of the UI Element
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”
Drag&Drop attributefrominto second free span of first row to open dialogto add the correspondingand uncheck property
-
Step 2:
Repeat Step 1 to add UI File upload for
attributes
attributes
-
“personalWarehouse.univGrades”
-
“personalWarehouse.idPicture”
-
Step 3:
Select third UI File upload
and open
TAB
“Implementation”
SubTab
“Data Mapping” and
SubTab
“
Definition Objects”
.
Step 3:Selectand open
-
Step 4: Search
“SelectLabel”
definition object and map
“SELECT_IMAGE”
enum value on field “
Label “Select File”
“.
Step 4: Searchdefinition object and mapenum value on field
-
Step 5: Map
“CHANGE_IMAGE”
enum value on field “
Label “Change File”
“.
Step 5: Mapenum value on field
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”
Drag&Drop attributefrominto the second free span of second row to open dialogto add the correspondingto theand uncheck property
-
Step 2:
Repeat Step 1 to add UI File upload for
attributes
attributes
-
“personalWarehouse.audio”
-
“personalWarehouse.video”
-
“personalWarehouse.other”
-
Step 3: Select first UI File upload and
open
TAB “Implementation”, SubTAB “File Configuration”
to select value
“Image”
from the ComboBox
opento select valuefrom the ComboBox
-
Step 4:
Repeat Step 3 for
the rest of the elements
the rest of the elements
-
for
“personalWarehouse.audio”
select file type
“Audio”
forselect
-
for
“personalWarehouse.video”
select file type
“Video”
forselect
-
for
“personalWarehouse.other”
keep
default file type
“Other”
forkeep
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”
Drag&Drop attributefrominto free span to open dialogto add the correspondingto theand uncheck property
-
Step 2:
Repeat Step 1 to add UI File upload for
attribute
attribute
-
“personalWarehouse.birthCertificate”
-
Step 3:
Select the first UI
File upload
and open
TAB
“Implementation”
SubTab
“Events”
to specify event type
“onClick”
Select the firstand opento specify
-
Step 4: Implement the action script, which displays the related event action at the right side of the UI element.
Step 4: Implement the, which displays the relatedat the right side of the UI element
localData.eventType.onClick = globalDef.enums.
Tutorial
.
UIM
.
DEF
.
EventMessage
.
ON_CLICK
;
-
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.
to specify furtherand related, which display the relatedat 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”
Select the firstand opento specify
-
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.
Step 2: Implement thethe, which display the relatedat 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
-
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.
to specify furtherand relatedand, which display the relatedat 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.
Drag&Drop attributefrominto the third free span of third row to open dialogto add the correspondingandto the
-
Step 2:
Select the first UI
File upload
and open TAB
“Implementation”
SubTab
“Visibility”
Select the firstand open
-
Step 3: Click at visibility type
“Enabled”
and select state
“Script”
Step 3: Click atand select
-
Step 4: Implement the visibility script, which toggles the visibility
“enabled”
and
“disabled”
Step 4: Implement the, which toggles theand
localData.toggleVisibility
-
Repeat steps 2..4 for second UI
File Upload
for visibility type
“Visible”
, which toggles the visibility
“visible”
and
“invisible”
Repeat steps 2..4 for secondfor, which toggles theand
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”
Open
-
Step 2: Select UI page
“View FileUpload”
to open TAB
“General”
, SubTAB
“Element”
Step 2: Selectto open
-
Step 3:
Click button
“Search“
to open dialog
“Select or Create Submodel”
and select UI page
“FileUpload”
with double click
Step 3:to openand selectwith double click
-
Step 4: Right click on button flow to set label with
“Exit”
flow.
Step 4: Right click onto set label withflow
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
Open UI Page and clickin theto directly test the UI page within the UI editor
-
Step 2: Open related frontend service model (Automation/Service/Training/UIM/Exercise/Basic/FileUpload) and click button
“Preview”
to test the UI page
Step 2: Open related(Automation/Service/Training/UIM/Exercise/Basic/FileUpload) and clickto test the UI page
-
Step 3: Optionally publish the frontend service model and test the UI page in AUP
Step 3: Optionally publish theand test the UI page in
Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into second free span
Top
Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
Top
Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
Top
Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
Top
Drag&Drop
UI File upload
from Palette
Drag&Drop UI FileUpload element from palette into free span
Top
Drag&Drop UI File upload from Palette
Drag&Drop UI FileUpload element from palette into free span
Top
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]
Top
Select UI Element
Select UI File upload element
Top
Configure UI Element Width
Configure
width
[50%] and
width
[100px]
, accordingly
Top
Click Button “Span”
Click at button
“Span”
Top
Configure H-Alignment
Configure H-Alignment
[Left], [Center], [Right] of the
UI element
Top
Select UI Element
Select
each UI
File upload
of
Heigh section
Top
Configure UI Element Height
Configure UI Element height in px
Top
Click Button “Span”
Click at button
“Span”
Top
Configure V-Alignment
Configure V-Alignment
[Top], [Middle], [Bottom] of the
UI element
Top
Select UI Element
Select UI File upload to configure file name position
Top
Check Option “Text Before”
Check option to display file name before the UI Element
Top
Select UI Element
Select UI File upload to display default values for file name configuration
Top
Default Filename Configuration
Notice the default values for file name configuration
Top
Select UI Element
Select UI File upload to configure file name visibility
Top
Uncheck Option “Show Filename”
Uncheck option “Show Filename” to hide file name on the UI Element
Top
Select UI Element
Select UI File upload to display default value for drop element configuration
Top
Default Value
Notice the default value for drop element configuration
Top
Select UI Element
Select UI File upload to configure drop element
Top
Check Option “Drop Element”
Check option to set drop element enabled
Top
Drag&Drop Attribute from TAB “Data”
Drag&Drop attribute
“personalWarehouse.degreeCopy”
from TAB
“Data”
into second free span of first row
Top
Drag&Drop Attribute from TAB “Data”
Drag&Drop attributes from TAB
“Data”
into free spans
Top
Select UI Element
Select third UI File upload
and open
TAB
“Implementation”
SubTab
“Data Mapping” and
SubTab
“
Definition Objects”
Top
Search Attribute
Search
“SelectLabel”
definition object
Top
Map “Select File”
Map
“SELECT_IMAGE”
enum value on field “
Label “Select File”
“.
Top
Map “Change File”
Map
“CHANGE_IMAGE”
enum value on field “
Label “Change File”
“.
Top
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”
Top
Drag&Drop Attributes from TAB “Data”
Drag&Drop attributes from TAB
“Data”
into free spans
Top
Select UI Element
Select first UI File upload and
open
TAB “Implementation”, SubTAB “File Configuration”
Top
Select File Type
Select File Type for the selected element
Top
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”
Top
Drag&Drop Attribute from TAB “Data”
Drag& Drop attribute
“personalWarehouse.birthCertificate”
from TAB
“Data”
into free span
Top
Select UI Element
Select first UI File upload and
open
TAB “Implementation”, SubTAB “Events”
Top
Specify Event Type
Specify event type
“onClick”
Top
Enter Action Script
Implement the action script
Top
Event Action
Displays the related event action at the right side of the UI element.
Top
Select UI Element
Select the first UI File upload and open
TAB
“Implementation”,
SubTab
“Events”
Top
Specify Event Type
Specify event type
“onClick”
Top
Enter Action&Validation Scripts
Implement the action script and validation script
Top
Event Action
Displays the related event action at the right side of the UI element.
Top
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.
Top
Select UI Element
Select the first UI
File upload
and open TAB
“Implementation”
SubTab
“Visibility”
Top
Select “Enabled” and State “Script”
Click at visibility type
“Enabled”
and select state
“Script”
Top
Enter Visibility Script
Implement the visibility script, which toggles the visibility
“enabled”
and
“disabled”
Top
