Upload Set
This sample shows an Upload Set control with a list of files to be uploaded and actions you can perform on them.
Z2UI5_CL_SMPC_APP_121
Controls
sap.m
UI5 1.103
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_121- Source file
z2ui5_cl_smpc_app_121.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.upload.UploadSet- Demo kit sample
sap.m.sample.UploadSet- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.103
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: uploadset, upload, set, sap.m.upload, file, list, overflowtoolbar, toolbarspacer, button, uploadsettoolbarplaceholder, uploadsetitem, objectmarker
Controls it builds
- sap.m.Button
- sap.m.ObjectMarker
- sap.m.ObjectStatus
- sap.m.OverflowToolbar
- sap.m.Page
- sap.m.ToolbarSpacer
- sap.m.upload.UploadSet
- sap.m.upload.UploadSetItem
- sap.m.upload.UploadSetToolbarPlaceholder
- sap.ui.core.mvc.View
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
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_121.clas.abap — 205 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords uploadset upload set sap.m.upload file list overflowtoolbar toolbarspacer button uploadsettoolbarplaceholder uploadsetitem objectmarker
" @summary This sample shows an Upload Set control with a list of files to be uploaded and actions you can perform on them.
CLASS z2ui5_cl_smpc_app_121 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES: BEGIN OF ty_s_marker,
type TYPE string,
visibility TYPE string,
END OF ty_s_marker.
TYPES: BEGIN OF ty_s_status,
title TYPE string,
text TYPE string,
state TYPE string,
icon TYPE string,
active TYPE abap_bool,
END OF ty_s_status.
TYPES: BEGIN OF ty_s_item,
filename TYPE string,
mediatype TYPE string,
url TYPE string,
thumbnailurl TYPE string,
uploadstate TYPE string,
markers TYPE STANDARD TABLE OF ty_s_marker WITH EMPTY KEY,
statuses TYPE STANDARD TABLE OF ty_s_status WITH EMPTY KEY,
END OF ty_s_item.
DATA t_items TYPE STANDARD TABLE OF ty_s_item WITH EMPTY KEY.
" onSelectionChange enables the version button for exactly one selection
DATA version_enabled TYPE abap_bool.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_121 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.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:upload` v = `sap.m.upload`
)->a( n = `height` v = `100%`
)->ele( `Page`
)->a( n = `showHeader` v = `false`
)->ele( n = `UploadSet` ns = `upload`
)->a( n = `id` v = `UploadSet`
)->a( n = `instantUpload` v = `true`
)->a( n = `showIcons` v = `true`
)->a( n = `uploadEnabled` v = `true`
)->a( n = `terminationEnabled` v = `true`
)->a( n = `fileTypes` v = `txt,doc,png`
)->a( n = `maxFileNameLength` v = `30`
)->a( n = `maxFileSize` v = `200`
)->a( n = `mediaTypes` v = `text/plain,application/msword,image/png`
)->a( n = `uploadUrl` v = `../../../../upload`
" omit_initial_paths so a marker that sets no visibility keeps
" the control's own default. The original's markers are
" {"type":"Draft"} and carry no visibility at all, so its
" visibility="{visibility}" resolves to undefined and UI5 leaves
" the property alone. ABAP has no undefined: the unfilled
" TYPE string serialized as "" and sap.m.ObjectMarkerVisibility
" rejects it, which TERMINATED the app on its first render.
" STATE and ICON are the same story one control down: only one
" of the original's four statuses carries a state and none
" carries an icon, so ObjectStatus.state got "" and
" sap.ui.core.ValueState rejected THAT - the app died again,
" one enum further along, after VISIBILITY was fixed.
)->a( n = `items` v = client->_bind( val = t_items
omit_initial_paths = VALUE #( ( `VISIBILITY` )
( `STATE` )
( `ICON` ) ) )
)->a( n = `mode` v = `MultiSelect`
)->a( n = `selectionChanged` v = client->_event( val = `SELECTION` arg = `$event.oSource.getSelectedItems().length` )
)->a( n = `afterItemRemoved` v = client->_event( val = `REMOVED` arg = `${$parameters>/item}.getFileName()` )
)->ele( n = `toolbar` ns = `upload`
)->ele( `OverflowToolbar`
)->tag( `ToolbarSpacer`
)->tag( `Button`
)->a( n = `id` v = `uploadSelectedButton`
)->a( n = `text` v = `Upload selected`
)->a( n = `press` v = client->_event( `UPLOAD` )
)->tag( `Button`
)->a( n = `id` v = `downloadSelectedButton`
)->a( n = `text` v = `Download selected`
)->a( n = `press` v = client->_event( `DOWNLOAD` )
)->tag( `Button`
)->a( n = `id` v = `versionButton`
)->a( n = `enabled` v = client->_bind( version_enabled )
)->a( n = `text` v = `Upload a new version`
)->a( n = `press` v = client->_event( `VERSION` )
)->tag( n = `UploadSetToolbarPlaceholder` ns = `upload`
)->end(
)->end(
)->ele( n = `items` ns = `upload`
)->ele( n = `UploadSetItem` ns = `upload`
)->a( n = `fileName` v = `{FILENAME}`
)->a( n = `mediaType` v = `{MEDIATYPE}`
)->a( n = `url` v = `{URL}`
)->a( n = `thumbnailUrl` v = `{THUMBNAILURL}`
)->a( n = `markers` v = `{MARKERS}`
)->a( n = `statuses` v = `{STATUSES}`
)->a( n = `uploadState` v = `{UPLOADSTATE}`
)->ele( n = `markers` ns = `upload`
)->tag( `ObjectMarker`
)->a( n = `type` v = `{TYPE}`
)->a( n = `visibility` v = `{VISIBILITY}`
)->end(
)->ele( n = `statuses` ns = `upload`
)->tag( `ObjectStatus`
)->a( n = `title` v = `{TITLE}`
)->a( n = `text` v = `{TEXT}`
)->a( n = `state` v = `{STATE}`
)->a( n = `icon` v = `{ICON}`
)->a( n = `active` v = `{ACTIVE}` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `SELECTION`.
" onSelectionChange enables the version button for exactly one selected
" item; the original raises no toast here
version_enabled = xsdbool( client->get_event_arg( ) = `1` ).
WHEN `REMOVED`.
" onAfterItemRemoved splices the row out of the model. The sample matches
" on an id this row type does not carry, so the wire transports the file
" name, which is unique across the two rows
DELETE t_items WHERE filename = client->get_event_arg( ).
WHEN `UPLOAD`.
client->message_toast_display( `Upload selected pressed` ).
WHEN `DOWNLOAD`.
client->message_toast_display( `Download selected pressed` ).
WHEN `VERSION`.
client->message_toast_display( `Upload a new version pressed` ).
ENDCASE.
ENDMETHOD.
METHOD model_init.
" the sample's own items.json, both rows verbatim - the asset URLs point at
" the OpenUI5 host per the offline asset rule
t_items = VALUE #(
( filename = `Business Plan Agenda.doc`
mediatype = `application/msword`
url = `https://sdk.openui5.org/test-resources/sap/m/demokit/sample/UploadCollection/LinkedDocuments/Business Plan Agenda.doc`
uploadstate = `Complete`
markers = VALUE #( ( type = `Draft` ) ( type = `Favorite` ) ( type = `Flagged` )
( type = `Locked` ) ( type = `Unsaved` ) )
statuses = VALUE #( ( title = `Uploaded By` text = `Jane Burns` active = abap_true )
( title = `Uploaded On` text = `2014-07-28` active = abap_false )
( title = `File Size` text = `25` active = abap_false )
( title = `Document Info Record` text = `SSP/101010101` state = `Information` ) ) )
( filename = `Picture of a woman.png`
url = `https://sdk.openui5.org/test-resources/sap/m/images/Woman_04.png`
thumbnailurl = `https://sdk.openui5.org/test-resources/sap/m/images/Woman_04.png`
uploadstate = `Complete`
statuses = VALUE #( ( title = `Uploaded By` text = `Jane Burns` active = abap_true )
( title = `Uploaded On` text = `2014-07-28` active = abap_false ) ) ) ).
ENDMETHOD.
ENDCLASS.
More in sap.m
- Table Select Dialog — Similar to the Select Dialog, the Table Select Dialog presents selectable items in a tabl…
- Semantic Page Full Screen — Semantic Page Full Screen
- Semantic Page using Floating Footer — Integration of Floating Footer inside Semantic Page
- Semantic Page Master-Detail — Semantic Page Master/Detail
- Planning Calendar - without row header — PlanningCalendar with only one row without row header. On click on an interval a new appo…
- Single Planning Calendar with Multiple Date Selection — SinglePlanningCalendar with multiple date selection functionality.
- MaskInput — The sap.m.MaskInput control allows users to easily enter data in a certain format and in…
- Formatted Text — The control can be used for embedding formatted HTML text into your application.
- Check Box — Checkboxes allow users to select a subset of options. If you want to offer an off/on sett…
- Numeric Content of Different Colors — Shows NumericContent including numbers, units of measurement, and status arrows indicatin…
- Header Container - Vertical Mode — The Header Container with a vertical layout and with divider lines.
- Flex Box - Gap, Row Gap & Column Gap — You can add gap between rows and columns.
On this page