Plugin for Tree Table (sap.ui.table.TreeTable)
This example demonstrates the usage of UploadSetwithTable plugin for tree table with the features of upload, download, drag & drop, remove and rename of files. It also demonstrates how the uploaded files can be displayed in a table.
Z2UI5_CL_SMPC_APP_660
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_660- Source file
z2ui5_cl_smpc_app_660.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.plugins.UploadSetwithTable- Demo kit sample
sap.m.sample.UploadSetwithTablePlugin.TreeTableSimple- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.139
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: uploadsetwithtable, upload, setwith, table, sap.m.plugins, uploadsetwithtableplugin.treetablesimple, dynamicpage, treetable, overflowtoolbar, title, toolbarspacer, actionsplaceholder
Controls it builds
- sap.f.DynamicPage
- sap.m.Button
- sap.m.Dialog
- sap.m.HBox
- sap.m.Image
- sap.m.Input
- sap.m.Label
- sap.m.Link
- sap.m.Menu
- sap.m.MenuButton
- sap.m.MenuItem
- sap.m.OverflowToolbar
- sap.m.OverflowToolbarLayoutData
- sap.m.Text
- sap.m.Title
- sap.m.ToolbarSpacer
- sap.m.VBox
- sap.m.plugins.UploadSetwithTable
- sap.m.upload.ActionsPlaceholder
- sap.m.upload.UploadItemConfiguration
- sap.ui.core.FragmentDefinition
- sap.ui.core.Icon
- sap.ui.core.mvc.View
- sap.ui.layout.form.SimpleForm
- sap.ui.table.Column
- sap.ui.table.RowSettings
- sap.ui.table.TreeTable
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
" @keywords uploadsetwithtable upload setwith table sap.m.plugins uploadsetwithtableplugin.treetablesimple dynamicpage treetable overflowtoolbar title toolbarspacer actionsplaceholder
" @summary This example demonstrates the usage of UploadSetwithTable plugin for tree table with the features of upload, download, drag & drop, remove and rename of files. It also demonstrates how the uploaded files can be displayed in a table.
" @origin sap.m.sample.UploadSetwithTablePlugin.TreeTableSimple - https://sdk.openui5.org/entity/sap.m.plugins.UploadSetwithTable/sample/sap.m.sample.UploadSetwithTablePlugin.TreeTableSimple (status: generated - machine-written, not yet reviewed)
CLASS z2ui5_cl_smpc_app_660 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
" documents.json is a folder tree three levels deep - one row type per level,
" every level carrying every field, the upper two their ITEMS
TYPES:
BEGIN OF ty_s_item,
id TYPE string,
filename TYPE string,
mediatype TYPE string,
imageurl TYPE string,
url TYPE string,
status TYPE string,
filesize TYPE i,
lastmodifiedby TYPE string,
lastmodified TYPE string,
documenttype TYPE string,
previewable TYPE abap_bool,
trustedsource TYPE abap_bool,
isdirectory TYPE abap_bool,
color TYPE string,
bgcolor TYPE string,
uploadstate TYPE string,
icon TYPE string,
filesize_units TYPE string,
END OF ty_s_item.
TYPES ty_t_item TYPE STANDARD TABLE OF ty_s_item WITH EMPTY KEY.
TYPES:
BEGIN OF ty_s_folder,
id TYPE string,
filename TYPE string,
mediatype TYPE string,
imageurl TYPE string,
url TYPE string,
status TYPE string,
filesize TYPE i,
lastmodifiedby TYPE string,
lastmodified TYPE string,
documenttype TYPE string,
previewable TYPE abap_bool,
trustedsource TYPE abap_bool,
isdirectory TYPE abap_bool,
color TYPE string,
bgcolor TYPE string,
uploadstate TYPE string,
icon TYPE string,
filesize_units TYPE string,
items TYPE ty_t_item,
END OF ty_s_folder.
TYPES ty_t_folder TYPE STANDARD TABLE OF ty_s_folder WITH EMPTY KEY.
TYPES:
BEGIN OF ty_s_root,
id TYPE string,
filename TYPE string,
mediatype TYPE string,
imageurl TYPE string,
url TYPE string,
status TYPE string,
filesize TYPE i,
lastmodifiedby TYPE string,
lastmodified TYPE string,
documenttype TYPE string,
previewable TYPE abap_bool,
trustedsource TYPE abap_bool,
isdirectory TYPE abap_bool,
color TYPE string,
bgcolor TYPE string,
uploadstate TYPE string,
icon TYPE string,
filesize_units TYPE string,
items TYPE ty_t_folder,
END OF ty_s_root.
DATA t_items TYPE STANDARD TABLE OF ty_s_root WITH EMPTY KEY.
" onSelectionChange: Download for one or more rows, the rest for exactly one
DATA download_enabled TYPE abap_bool.
DATA single_enabled TYPE abap_bool.
" the AddViaUrl fragment, in its Add URL and Edit URL shapes
DATA dialog_title TYPE string.
DATA apply_text TYPE string.
DATA url_required TYPE abap_bool.
DATA url_input TYPE string.
DATA url_state TYPE string.
DATA url_state_text TYPE string.
DATA name_input TYPE string.
DATA name_state TYPE string.
DATA name_state_text TYPE string.
PROTECTED SECTION.
TYPES ty_t_index TYPE STANDARD TABLE OF i WITH EMPTY KEY.
DATA client TYPE REF TO z2ui5_if_client.
" the binding paths of the selected rows and of the row a removal asks about
DATA t_selected TYPE string_table.
DATA remove_path TYPE string.
DATA is_edit TYPE abap_bool.
DATA upload_no TYPE i.
METHODS view_display.
METHODS popup_url_display.
METHODS on_event.
METHODS url_apply.
METHODS remove_ask
IMPORTING
path TYPE string.
METHODS name_valid
RETURNING
VALUE(result) TYPE abap_bool.
METHODS url_valid
RETURNING
VALUE(result) TYPE abap_bool.
METHODS row_add
IMPORTING
filename TYPE string
mediatype TYPE string
url TYPE string
filesize TYPE i.
METHODS path_indices
IMPORTING
path TYPE string
RETURNING
VALUE(result) TYPE ty_t_index.
METHODS node_get
IMPORTING
path TYPE string
RETURNING
VALUE(result) TYPE ty_s_item.
METHODS node_rename
IMPORTING
path TYPE string
name TYPE string.
METHODS row_derive
CHANGING
row TYPE ty_s_item.
METHODS icon_for
IMPORTING
mediatype TYPE string
filename TYPE string
RETURNING
VALUE(result) TYPE string.
METHODS size_with_units
IMPORTING
size TYPE i
RETURNING
VALUE(result) TYPE string.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_660 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_init( ).
model_init( ).
view_display( ).
ELSEIF client->check_on_navigated( ).
view_display( ).
ELSEIF client->check_on_event( ).
on_event( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns` v = `sap.ui.table`
)->a( n = `xmlns:m` v = `sap.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:f` v = `sap.f`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:upload` v = `sap.m.upload`
)->a( n = `xmlns:plugins` v = `sap.m.plugins`
)->a( n = `height` v = `100%`
)->a( n = `displayBlock` v = `true`
)->ele( n = `DynamicPage` ns = `f`
)->a( n = `id` v = `page`
)->ele( n = `content` ns = `f`
)->ele( `TreeTable`
)->a( n = `id` v = `table-uploadSet`
" IMAGEURL and UPLOADSTATE stay absent where the mock has
" none, so the view's undefined checks read as in the sample
)->a( n = `rows` v = client->_bind( val = t_items
omit_initial_paths = VALUE #( ( `IMAGEURL` )
( `UPLOADSTATE` ) ) )
)->a( n = `selectionMode` v = `MultiToggle`
)->a( n = `rowSelectionChange` v = client->_event( val = `SELECTION`
arg = `$event.oSource.getBinding('rows').getSelectedContexts().join()` )
)->ele( `extension`
)->ele( n = `OverflowToolbar` ns = `m`
)->a( n = `style` v = `Clear`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = |Documents (\{= ${ client->_bind( t_items ) }.length\})|
)->a( n = `level` v = `H2`
)->tag( n = `ToolbarSpacer` ns = `m`
)->tag( n = `ActionsPlaceholder` ns = `upload`
)->a( n = `id` v = `uploadButton`
)->a( n = `placeholderFor` v = `UploadButtonPlaceholder`
)->tag( n = `Button` ns = `m`
)->a( n = `id` v = `downloadSelectedButton`
)->a( n = `text` v = `Download`
)->a( n = `enabled` v = client->_bind( download_enabled )
)->a( n = `press` v = client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `uploadSetPlugin` )
( `download` )
( `$controller.getView().byId('table-uploadSet').getContextByIndex(` &&
`$controller.getView().byId('table-uploadSet').getSelectedIndices()[0])` )
( `true` ) ) )
)->ele( n = `MenuButton` ns = `m`
)->a( n = `text` v = `Add`
)->ele( n = `menu` ns = `m`
)->ele( n = `Menu` ns = `m`
)->tag( n = `MenuItem` ns = `m`
)->a( n = `text` v = `URL`
)->a( n = `press` v = client->_event( `ADD_URL` )
)->end(
)->end(
)->ele( n = `layoutData` ns = `m`
)->tag( n = `OverflowToolbarLayoutData` ns = `m`
)->a( n = `priority` v = `AlwaysOverflow`
)->end(
)->end(
)->ele( n = `Button` ns = `m`
)->a( n = `id` v = `removeDocumentButton`
)->a( n = `text` v = `Remove`
)->a( n = `press` v = client->_event( `REMOVE_SELECTED` )
)->a( n = `enabled` v = client->_bind( single_enabled )
)->ele( n = `layoutData` ns = `m`
)->tag( n = `OverflowToolbarLayoutData` ns = `m`
)->a( n = `priority` v = `AlwaysOverflow`
)->end(
)->end(
)->ele( n = `Button` ns = `m`
)->a( n = `id` v = `renameButton`
)->a( n = `enabled` v = client->_bind( single_enabled )
)->a( n = `press` v = client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `uploadSetPlugin` )
( `renameItem` )
( `$controller.getView().byId('table-uploadSet').getContextByIndex(` &&
`$controller.getView().byId('table-uploadSet').getSelectedIndices()[0])` ) ) )
)->a( n = `text` v = `Rename`
)->ele( n = `layoutData` ns = `m`
)->tag( n = `OverflowToolbarLayoutData` ns = `m`
)->a( n = `priority` v = `AlwaysOverflow`
)->end(
)->end(
)->ele( n = `Button` ns = `m`
)->a( n = `id` v = `editUrlButton`
)->a( n = `text` v = `Edit URL`
)->a( n = `enabled` v = client->_bind( single_enabled )
)->a( n = `press` v = client->_event( `EDIT_URL` )
)->ele( n = `layoutData` ns = `m`
)->tag( n = `OverflowToolbarLayoutData` ns = `m`
)->a( n = `priority` v = `AlwaysOverflow`
)->end(
)->end(
)->end(
)->end(
)->ele( `dependents`
)->ele( n = `UploadSetwithTable` ns = `plugins`
" the id is added - the port calls the plugin by id where the
" controller kept the instance onActivated handed it
)->a( n = `id` v = `uploadSetPlugin`
)->a( n = `uploadUrl` v = `/uploadFiles`
)->a( n = `multiple` v = `true`
" the mock server's part: the upload is vetoed and the backend
" adds the row the fake 201 response would have created
)->a( n = `beforeUploadStarts` v = client->_event( val = `UPLOAD`
t_arg = VALUE #( ( `${$parameters>/item}.getFileName()` )
( `${$parameters>/item}.getMediaType()` )
( `${$parameters>/item}.getFileObject().size` ) )
s_ctrl = VALUE #( check_prevent_default = abap_true
check_queue_last = abap_true ) )
)->a( n = `itemRenamed` v = client->_event( val = `RENAMED`
t_arg = VALUE #( ( `${$parameters>/item}.getBindingContext().getPath()` )
( `${$parameters>/item}.getFileName()` ) ) )
)->a( n = `cloudFilePickerEnabled` v = `true`
)->a( n = `actions` v = `uploadButton`
" the paths name the model's upper-case ABAP fields
)->tag( n = `UploadItemConfiguration` ns = `upload`
)->a( n = `fileNamePath` v = `FILENAME`
)->a( n = `mediaTypePath` v = `MEDIATYPE`
)->a( n = `urlPath` v = `URL`
)->a( n = `previewablePath` v = `PREVIEWABLE`
)->a( n = `fileSizePath` v = `FILESIZE`
)->a( n = `isTrustedSourcePath` v = `TRUSTEDSOURCE`
)->a( n = `isDirectoryPath` v = `ISDIRECTORY`
)->end(
)->end(
)->ele( `rowSettingsTemplate`
)->tag( `RowSettings`
)->a( n = `highlight` v = `{= ${UPLOADSTATE} === 'Complete' ? 'Indication05' : null }`
)->end(
)->ele( `columns`
)->ele( `Column`
)->a( n = `width` v = `40%`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `File Name`
)->ele( `template`
)->ele( n = `HBox` ns = `m`
)->a( n = `class` v = `sapUiSmallMarginTop sapUiTinyMarginBottom`
)->tag( n = `Image` ns = `m`
)->a( n = `src` v = `{IMAGEURL}`
)->a( n = `class` v = `sapMUSTItemImage sapMUSTItemIcon`
)->a( n = `visible` v = `{= ${IMAGEURL} !== undefined}`
" getIconSrc runs in ABAP: the row carries the finished icon
)->tag( n = `Icon` ns = `core`
)->a( n = `src` v = `{ICON}`
)->a( n = `visible` v = `{= ${IMAGEURL} === undefined || ${IMAGEURL} === '' }`
)->a( n = `class` v = `sapMUSTItemIcon`
)->a( n = `color` v = `{= ${ISDIRECTORY} ? ${COLOR} : '' }`
)->a( n = `backgroundColor` v = `{= ${ISDIRECTORY} ? ${BGCOLOR} : '' }`
)->ele( n = `VBox` ns = `m`
)->a( n = `class` v = `sapUiTinyMargin sapUiSmallMarginBegin`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `{FILENAME}`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->a( n = `visible` v = `{= ${ISDIRECTORY} === true }`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `{FILENAME}`
)->a( n = `press` v = client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `uploadSetPlugin` )
( `openFilePreview` )
( `$event.oSource.getBindingContext()` ) ) )
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->a( n = `visible` v = `{= ${ISDIRECTORY} === false }`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `{DOCUMENTTYPE}`
)->end(
)->end(
)->end(
)->end(
)->ele( `Column`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Status`
)->ele( `template`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `{STATUS}`
)->end(
)->end(
)->ele( `Column`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `File Size`
" getFileSizeWithUnits runs in ABAP as well
)->ele( `template`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `{FILESIZE_UNITS}`
)->end(
)->end(
)->ele( `Column`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Last Modified`
)->ele( `template`
)->ele( n = `VBox` ns = `m`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `{LASTMODIFIEDBY}`
)->tag( n = `Text` ns = `m`
)->a( n = `class` v = `sapUiTinyMarginTop`
)->a( n = `text` v = `{LASTMODIFIED}`
)->end(
)->end(
)->end(
)->ele( `Column`
)->ele( `template`
)->tag( n = `Button` ns = `m`
)->a( n = `class` v = `sapUiTinyMarginBegin`
)->a( n = `type` v = `Transparent`
)->a( n = `icon` v = `sap-icon://decline`
)->a( n = `press` v = client->_event( val = `REMOVE_ROW`
arg = `$event.oSource.getBindingContext().getPath()` )
)->a( n = `visible` v = `{= ${ISDIRECTORY} === false }` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD popup_url_display.
DATA(popup) = z2ui5_cl_ui5_view_builder=>factory( ).
popup->ele( n = `FragmentDefinition` ns = `core`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:form` v = `sap.ui.layout.form`
)->a( n = `templateShareable` v = `false`
)->a( n = `class` v = `sapUiTinyMarginTop`
)->ele( `Dialog`
)->a( n = `id` v = `addViaUrlDialog`
)->a( n = `title` v = client->_bind( dialog_title )
)->a( n = `contentWidth` v = `28rem`
)->a( n = `contentHeight` v = `15rem`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `content`
)->ele( n = `SimpleForm` ns = `form`
)->a( n = `editable` v = `true`
)->a( n = `id` v = `addViaUrlSimpleform`
)->tag( `Label`
)->a( n = `id` v = `urlInputLabel`
)->a( n = `text` v = `URL`
)->a( n = `required` v = client->_bind( url_required )
)->tag( `Input`
)->a( n = `id` v = `urlInput`
)->a( n = `value` v = client->_bind( url_input )
)->a( n = `valueState` v = client->_bind( url_state )
)->a( n = `valueStateText` v = client->_bind( url_state_text )
)->tag( `Label`
)->a( n = `id` v = `nameInputLabel`
)->a( n = `text` v = `Name`
)->a( n = `required` v = `true`
)->tag( `Input`
)->a( n = `id` v = `nameInput`
)->a( n = `value` v = client->_bind( name_input )
)->a( n = `valueState` v = client->_bind( name_state )
)->a( n = `valueStateText` v = client->_bind( name_state_text )
)->end(
)->end(
)->ele( `beginButton`
)->tag( `Button`
)->a( n = `id` v = `addDocumentBtn`
)->a( n = `text` v = client->_bind( apply_text )
)->a( n = `type` v = `Emphasized`
)->a( n = `press` v = client->_event( `URL_APPLY` )
)->end(
)->ele( `endButton`
)->tag( `Button`
)->a( n = `text` v = `Cancel`
)->a( n = `press` v = client->follow_up_action( client->cs_event-popup_close ) ).
client->popup_display( popup->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `SELECTION`.
" onSelectionChange - the binding's selected contexts arrive as their paths;
" the buttons only count files, and only while no folder is selected
t_selected = VALUE #( ).
IF client->get_event_arg( ) IS NOT INITIAL.
SPLIT client->get_event_arg( ) AT `,` INTO TABLE t_selected.
ENDIF.
DATA(files) = 0.
DATA(folders) = 0.
LOOP AT t_selected INTO DATA(path).
IF node_get( path )-isdirectory = abap_true.
folders = folders + 1.
ELSE.
files = files + 1.
ENDIF.
ENDLOOP.
download_enabled = xsdbool( files > 0 AND folders = 0 ).
single_enabled = xsdbool( files = 1 AND folders = 0 ).
WHEN `ADD_URL`.
" openAddOrEditDialog in its Add shape
is_edit = abap_false.
dialog_title = `Add URL`.
apply_text = `Add`.
url_required = abap_true.
url_input = ``.
name_input = ``.
url_state = `None`.
url_state_text = ``.
name_state = `None`.
name_state_text = ``.
popup_url_display( ).
WHEN `EDIT_URL`.
" onEditUrl - the same fragment as Edit URL, filled from the selected row
IF t_selected IS INITIAL.
RETURN.
ENDIF.
DATA(row) = node_get( t_selected[ 1 ] ).
is_edit = abap_true.
dialog_title = `Edit URL`.
apply_text = `Apply`.
url_required = abap_false.
url_input = row-url.
name_input = row-filename.
url_state = `None`.
url_state_text = ``.
name_state = `None`.
name_state_text = ``.
popup_url_display( ).
WHEN `URL_APPLY`.
url_apply( ).
WHEN `EDIT_CONFIRM`.
IF client->get_event_arg( ) = `Save`.
" the Save button validates (value states) and applies regardless
name_valid( ).
url_valid( ).
" the sample looks the row up by id in the top-level /items only
IF t_selected IS NOT INITIAL.
DATA(edit_id) = node_get( t_selected[ 1 ] )-id.
LOOP AT t_items REFERENCE INTO DATA(top) WHERE id = edit_id AND id IS NOT INITIAL.
top->filename = name_input.
top->url = url_input.
ENDLOOP.
ENDIF.
client->popup_destroy( ).
ENDIF.
WHEN `REMOVE_SELECTED`.
IF t_selected IS NOT INITIAL.
remove_ask( t_selected[ 1 ] ).
ENDIF.
WHEN `REMOVE_ROW`.
remove_ask( client->get_event_arg( ) ).
WHEN `REMOVE_CLOSE`.
" removeItem splices the TOP-LEVEL index of the path (split('/')[2]) out of
" /items - for a file inside a folder, that is its top-level folder
IF client->get_event_arg( ) = `Remove`.
DATA(levels) = path_indices( remove_path ).
IF levels IS NOT INITIAL AND levels[ 1 ] <= lines( t_items ).
DELETE t_items INDEX levels[ 1 ].
ENDIF.
ENDIF.
WHEN `UPLOAD`.
" the file the FileUploader picked, as the mock server would answer it
row_add( filename = client->get_event_arg( )
mediatype = client->get_event_arg( 2 )
url = ``
filesize = CONV #( client->get_event_arg( 3 ) ) ).
client->message_toast_display( `Document Added` ).
WHEN `RENAMED`.
" onDocumentRenamedSuccess writes the new name into the row, at any depth
node_rename( path = client->get_event_arg( ) name = client->get_event_arg( 2 ) ).
client->message_toast_display( text = `Document Renamed.` duration = `2000` ).
ENDCASE.
ENDMETHOD.
METHOD url_apply.
" handleAddViaUrl
IF is_edit = abap_true.
IF name_valid( ) = abap_true.
" showEditConfirmation - a Message dialog in the Warning state
client->message_box_display( text = `You have made changes to this object. What would you like to do?`
type = `warning`
title = `Warning`
actions = VALUE #( ( `Save` ) ( `DiscardChanges` ) )
emphasizedaction = `Save`
onclose = `EDIT_CONFIRM` ).
ELSE.
client->message_toast_display( `No Changes found` ).
ENDIF.
RETURN.
ENDIF.
DATA(has_error) = xsdbool( name_valid( ) = abap_false ).
IF url_valid( ) = abap_false.
has_error = abap_true.
ENDIF.
IF has_error = abap_false.
" uploadItemViaUrl - the mock server answers with the typed URL as the
" document URL and an empty file
row_add( filename = name_input
mediatype = ``
url = url_input
filesize = 0 ).
client->popup_destroy( ).
client->message_toast_display( `Document Added` ).
ENDIF.
ENDMETHOD.
METHOD remove_ask.
" removeItem - MessageBox.warning; the icon is the warning box's own
DATA(node) = node_get( path ).
IF node IS INITIAL.
RETURN.
ENDIF.
remove_path = path.
client->message_box_display( text = |Are you sure you want to remove the document { node-filename } ?|
type = `warning`
actions = VALUE #( ( `Remove` ) ( `CANCEL` ) )
emphasizedaction = `Remove`
styleclass = `sapMUSTRemovePopoverContainer`
initialfocus = `CANCEL`
onclose = `REMOVE_CLOSE` ).
ENDMETHOD.
METHOD name_valid.
" _isValidName
IF name_input IS INITIAL.
name_state = `Error`.
name_state_text = `Text is either empty or contains special characters`.
ELSE.
name_state = `None`.
result = abap_true.
ENDIF.
ENDMETHOD.
METHOD url_valid.
" _validateAddOrEditUrlDialog's URL half - the sample's regex is unanchored,
" so a scheme followed by one non-blank character is what it requires
FIND REGEX `(ftp|http|https)://\S` IN url_input.
IF sy-subrc <> 0.
url_state = `Error`.
url_state_text = `Enter Valid URL`.
ELSE.
url_state = `None`.
result = abap_true.
ENDIF.
ENDMETHOD.
METHOD row_add.
" the mock server's Create branch - unshift the new document
upload_no = upload_no + 1.
DATA(row) = VALUE ty_s_root( id = |{ upload_no }|
filename = filename
mediatype = mediatype
url = url
uploadstate = `Complete`
status = `In work`
filesize = filesize
lastmodifiedby = `Jane Burns`
lastmodified = `10/03/21, 10:03:00 PM`
documenttype = `Invoice`
trustedsource = abap_true ).
row-icon = icon_for( mediatype = row-mediatype filename = row-filename ).
row-filesize_units = size_with_units( row-filesize ).
INSERT row INTO t_items INDEX 1.
ENDMETHOD.
METHOD path_indices.
" a row's binding path holds its index on every level, 0-based:
" /T_ITEMS/0/ITEMS/1 is the 2nd child of the 1st row
SPLIT path AT `/` INTO TABLE DATA(parts).
LOOP AT parts INTO DATA(part).
IF part IS NOT INITIAL AND part CO `0123456789`.
INSERT CONV i( part ) + 1 INTO TABLE result.
ENDIF.
ENDLOOP.
ENDMETHOD.
METHOD node_get.
DATA(levels) = path_indices( path ).
IF levels IS INITIAL OR levels[ 1 ] > lines( t_items ).
RETURN.
ENDIF.
DATA(root) = t_items[ levels[ 1 ] ].
IF lines( levels ) = 1.
result = CORRESPONDING #( root ).
RETURN.
ENDIF.
IF levels[ 2 ] > lines( root-items ).
RETURN.
ENDIF.
DATA(folder) = root-items[ levels[ 2 ] ].
IF lines( levels ) = 2.
result = CORRESPONDING #( folder ).
RETURN.
ENDIF.
IF levels[ 3 ] <= lines( folder-items ).
result = folder-items[ levels[ 3 ] ].
ENDIF.
ENDMETHOD.
METHOD node_rename.
DATA(levels) = path_indices( path ).
IF levels IS INITIAL OR levels[ 1 ] > lines( t_items ).
RETURN.
ENDIF.
DATA(root) = REF #( t_items[ levels[ 1 ] ] ).
IF lines( levels ) = 1.
root->filename = name.
RETURN.
ENDIF.
IF levels[ 2 ] > lines( root->items ).
RETURN.
ENDIF.
DATA(folder) = REF #( root->items[ levels[ 2 ] ] ).
IF lines( levels ) = 2.
folder->filename = name.
RETURN.
ENDIF.
IF levels[ 3 ] <= lines( folder->items ).
folder->items[ levels[ 3 ] ]-filename = name.
ENDIF.
ENDMETHOD.
METHOD row_derive.
" getIconSrc shows a folder for a directory; a folder has no fileSize, so
" getFileSizeWithUnits leaves its cell empty
IF row-isdirectory = abap_true.
row-icon = `sap-icon://folder-full`.
RETURN.
ENDIF.
row-icon = icon_for( mediatype = row-mediatype filename = row-filename ).
row-filesize_units = size_with_units( row-filesize ).
ENDMETHOD.
METHOD icon_for.
" UploadSetwithTable.getIconForFileType: IconPool's media type table, or the
" file extension when there is no media type
IF mediatype IS NOT INITIAL.
DATA(type) = to_lower( mediatype ).
CASE type.
WHEN `application/msword` OR `application/vnd.google-apps.document` OR `application/rtf`
OR `application/vnd.openxmlformats-officedocument.wordprocessingml.document`.
result = `sap-icon://doc-attachment`.
WHEN `application/pdf`.
result = `sap-icon://pdf-attachment`.
WHEN `application/msexcel` OR `application/vnd.ms-excel` OR `application/vnd.google-apps.spreadsheet`
OR `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`
OR `application/vnd.ms-excel.sheet.macroenabled.12`
OR `application/vnd.openxmlformats-officedocument.spreadsheetml.template`
OR `application/vnd.ms-excel.template.macroenabled.12`
OR `application/vnd.ms-excel.sheet.binary.macroenabled.12`
OR `application/vnd.ms-excel.addin.macroenabled.12`.
result = `sap-icon://excel-attachment`.
WHEN `application/vnd.ms-powerpoint` OR `application/vnd.google-apps.presentation` OR `application/mspowerpoint`
OR `application/vnd.openxmlformats-officedocument.presentationml.presentation`
OR `application/vnd.openxmlformats-officedocument.presentationml.slideshow`.
result = `sap-icon://ppt-attachment`.
WHEN `application/xml` OR `application/xhtml+xml` OR `application/x-httpd-php` OR `application/x-javascript`
OR `text/html`.
result = `sap-icon://attachment-html`.
WHEN `application/gzip` OR `application/x-rar-compressed` OR `application/x-tar` OR `application/zip`.
result = `sap-icon://attachment-zip-file`.
WHEN `audio/mpeg` OR `audio/voxware` OR `audio/x-aiff` OR `audio/x-midi` OR `audio/x-mpeg` OR `audio/x-m4a`
OR `audio/x-pn-realaudio` OR `audio/x-pn-realaudio-plugin` OR `audio/x-qt-stream` OR `audio/x-wav`.
result = `sap-icon://attachment-audio`.
WHEN `image/png` OR `image/tiff` OR `image/bmp` OR `image/jpeg` OR `image/gif`.
result = `sap-icon://attachment-photo`.
WHEN `text/plain` OR `text/comma-separated-values` OR `text/css` OR `text/javascript` OR `text/richtext`
OR `text/rtf` OR `text/tab-separated-values` OR `text/xml`.
result = `sap-icon://attachment-text-file`.
WHEN `video/mpeg` OR `video/mp4` OR `video/quicktime` OR `video/x-msvideo` OR `application/x-shockwave-flash`.
result = `sap-icon://attachment-video`.
WHEN OTHERS.
result = `sap-icon://document`.
ENDCASE.
RETURN.
ENDIF.
DATA(dot) = find( val = filename sub = `.` occ = -1 ).
IF dot < 0.
result = `sap-icon://document`.
RETURN.
ENDIF.
DATA(extension) = to_lower( substring( val = filename off = dot + 1 ) ).
CASE extension.
WHEN `bmp` OR `jpg` OR `jpeg` OR `png`.
result = `sap-icon://card`.
WHEN `csv` OR `xls` OR `xlsx`.
result = `sap-icon://excel-attachment`.
WHEN `doc` OR `docx` OR `odt`.
result = `sap-icon://doc-attachment`.
WHEN `pdf`.
result = `sap-icon://pdf-attachment`.
WHEN `ppt` OR `pptx`.
result = `sap-icon://ppt-attachment`.
WHEN `txt`.
result = `sap-icon://document-text`.
WHEN OTHERS.
result = `sap-icon://document`.
ENDCASE.
ENDMETHOD.
METHOD size_with_units.
" UploadSetwithTable.getFileSizeWithUnits - KB below a megabyte, then MB, then GB
CONSTANTS kilobyte TYPE i VALUE 1024.
DATA(bytes) = CONV decfloat34( size ).
IF size < kilobyte * kilobyte.
result = |{ bytes / kilobyte DECIMALS = 2 } KB|.
ELSEIF size < kilobyte * kilobyte * kilobyte.
result = |{ bytes / kilobyte / kilobyte DECIMALS = 2 } MB|.
ELSE.
result = |{ bytes / kilobyte / kilobyte / kilobyte DECIMALS = 2 } GB|.
ENDIF.
ENDMETHOD.
METHOD model_init.
" model/documents.json, every row - the document URLs point at the OpenUI5 host
t_items = VALUE #(
( filename = `Documents`
isdirectory = abap_true color = `#ffffff` bgcolor = `#30914c`
items = VALUE #(
( id = `23004579` filename = `Document.txt` mediatype = `text/plain`
url = `https://sdk.openui5.org/test-resources/sap/m/UploadSetwithTableSampleFiles/Document.txt`
status = `In work` filesize = 420 lastmodifiedby = `Jane Burns` lastmodified = `10/03/21, 10:03:00 PM`
documenttype = `Document` previewable = abap_true isdirectory = abap_false )
( filename = `Invoices`
isdirectory = abap_true color = `#ffffff` bgcolor = `#30914c`
items = VALUE #(
( id = `23004569` filename = `Invoice summary.doc` mediatype = `application/msword`
imageurl = `https://sdk.openui5.org/test-resources/sap/m/images/invoice_manager.png` url = `https://sdk.openui5.org/test-resources/sap/m/UploadSetwithTableSampleFiles/Business Plan Agenda.doc`
status = `In work` filesize = 200 lastmodifiedby = `Jane Burns` lastmodified = `10/03/21, 10:03:00 PM`
documenttype = `Invoice` previewable = abap_true isdirectory = abap_false ) ) ) ) )
( id = `23004583` filename = `Test Video.mp4` mediatype = `video/mp4`
url = `https://sdk.openui5.org/test-resources/sap/m/UploadSetwithTableSampleFiles/Video.mp4`
status = `In work` filesize = 420000 lastmodifiedby = `Jane Burns` lastmodified = `10/03/21, 10:03:00 PM`
documenttype = `Attachment` previewable = abap_true isdirectory = abap_false )
( id = `23004590` filename = `Sample Zip File.zip` mediatype = `application/zip`
url = `https://sdk.openui5.org/test-resources/sap/m/UploadSetwithTableSampleFiles/sample-zip-file.zip`
status = `In work` filesize = 42000 lastmodifiedby = `Jane Burns` lastmodified = `10/03/22, 10:20:00 PM`
documenttype = `Attachment` previewable = abap_true isdirectory = abap_false )
( filename = `Attachments`
isdirectory = abap_true color = `#ffffff` bgcolor = `#e76500`
items = VALUE #(
( id = `23004578` filename = `Instructions.pdf` mediatype = `application/pdf`
url = `https://sdk.openui5.org/test-resources/sap/m/UploadSetwithTableSampleFiles/Instructions.pdf`
status = `In work` filesize = 30000 lastmodifiedby = `Jane Burns` lastmodified = `10/03/21, 10:03:00 PM`
documenttype = `Specification` previewable = abap_true trustedsource = abap_true isdirectory = abap_false ) ) )
( id = `23004584` filename = `Transmission.vds` mediatype = `model/vnd.sap.vds`
url = `https://sdk.openui5.org/test-resources/sap/m/UploadSetwithTableSampleFiles/transmission.vds`
status = `In work` filesize = 123 lastmodifiedby = `Jane Burns` lastmodified = `10/03/22, 10:20:00 PM`
documenttype = `Attachment` previewable = abap_true trustedsource = abap_true isdirectory = abap_false ) ).
" the derived ICON and FILESIZE_UNITS on every level
The first 900 lines of 919 — the whole class is on GitHub.
More in sap.m
- Plugin for Grid Table (sap.ui.table.Table) — This example demonstrates the usage of UploadSetwithTable plugin for grid table with the…
- Plugin for Responsive Table (sap.m.Table) - Multiple plugin instances with multiple tables — This example demonstrates the usage of multiple plugin instances with multiple tables. Th…
- Plugin for Responsive Table (sap.m.Table) - File upload with user dialogs — This example demonstrates usage of itemValidationHandler callback to leverage additional…
- Plugin for Responsive Table (sap.m.Table) - File Preview — This example showcases how uploaded files can be previewed with FilePreviewDialog control…
- Plugin for Responsive Table (sap.m.Table) - Upload Progress and Upload Termination — This example demonstrates the progress or termination of the items that are being uploade…
- Plugin for Responsive Table (sap.m.Table) — This example demonstrates the usage of UploadSetwithTable plugin for responsive table wit…
- Plugin for Tree Table with folder hierarchy & folder uploads — This example demonstrates the usage of UploadSetwithTable plugin with a tree table featur…
- Manage Products — Created with the 'Worklist App' tutorial. - the UI5 demo app "Manage Products", rebuilt a…
- Browse Orders — Master-detail app for browsing orders. - the UI5 demo app "Browse Orders", rebuilt as one…
- Team Calendar — Calendar demo app for team and team members. - the UI5 demo app "Team Calendar", rebuilt…
- Shopping Cart — The classic business process of finding and ordering products. - the UI5 demo app "Shoppi…
- Bulletin Board — Worklist app created with the 'Testing' tutorial. - the UI5 demo app "Bulletin Board", re…