Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Implementing Attachments in UI5

abhimanyu_lagishetti7
Active Contributor
‎2022 Apr 05 12:58 PM
11,101

Introduction


This blog helps UI5/Fiori developers understand sap.m.uploader.UploadSet UI Element in detail.

Problem


The SAP UI5 Demo site explains the UploadSet sample application. However, the  site can not explain how it works with a back-end system.

Solution


Below is the step by step working example of the UploadSet UI element that I have implement. Hope this helps clarify many questions related to UploadSet.

Back-end Gateway Service Implementation


Build a Gateway Project, create an entity for attachment attributes shown below.


Gateway Project


Mark the entity as Media


Re-define Define method of the MPC Extension class to mark the Mimetype  field as content type.
  method DEFINE.

    super->define( ).



    data: lo_entity TYPE REF TO /iwbep/if_mgw_odata_entity_typ,



    lo_property TYPE REF TO /iwbep/if_mgw_odata_property.

    lo_entity = model->get_entity_type( iv_entity_name = 'Attachment' ).

    IF lo_entity IS BOUND.

     lo_property = lo_entity->get_property( iv_property_name = 'Mimetype').

     lo_property->set_as_content_type( ).



     lo_property = lo_entity->get_property( iv_property_name = 'Erdat' ).

     lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( 'sap' )->add(

       iv_key = 'display-format' iv_value = 'Date' ).

    ENDIF.



  endmethod.

Its time to implement the Data Provider class. Starting with re-defining method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM.

this method is called when an file is being attached. The most important information we need here is the content of the file, MIME type, filename, Key ( against which we are going to save this attachment ). We are making use of importing parameter iv_slug to get some of the information. We will know how to pass this information from UI when we code for UI5.
  method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM.

    DATA ls_attach      TYPE ZUI_ATTACHMENTS_S.

    DATA lv_xstring     TYPE xstring.

    DATA lr_attachments TYPE REF TO zcl_ut_ui5_attachments.

*    READ TABLE it_key_tab ASSIGNING FIELD-SYMBOL(<fs_key>) INDEX 1.



    SPLIT iv_slug AT ',' INTO ls_attach-filename

                              ls_attach-ref_guid

                              ls_attach-obj_name.



    ls_attach-mimetype  = is_media_resource-mime_type.

    ls_attach-erdat     = sy-datum.

    ls_attach-ernam     = sy-uname.

 
lf_data = is_media_resource-value.



** All the attachment information needed to save the file is obtained

** Now its time to save it to database/file system. Below code does that.

CREATE OBJECT lr_attachments.

ls_attach-guid  = lr_attachments->create_attachment( 

                     exporting i_attach = ls_attach

                     iv_content = lf_data

                  ).



** Return the etntity back to the caller

copy_data_to_ref( EXPORTING is_data = ls_attach

                  CHANGING  cr_data = er_entity ).

 

Implement method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM to download the file
  method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM.

    data ls_stream  type ty_s_media_resource.

    DATA lr_attachments TYPE REF TO zcl_ut_ui5_attachments.

    DATA ls_attach      TYPE zui_attachments.

    DATA ls_header      type ihttpnvp.

    DATA lv_guid        TYPE guid_32.

** Read the Key Information to obtain the file details

    READ TABLE it_key_tab INTO DATA(ls_key_tab) INDEX 1.

    IF sy-subrc <> 0.

      RETURN.

    ENDIF.

    lv_guid = ls_key_tab-value.



** Once the Key for the attachment is fetched. Its time to read the content

** from database/file system wherever it is stored

    CREATE OBJECT lr_attachments.

    lr_attachments->read_attachment( EXPORTING i_guid = lv_guid

                                    IMPORTING es_attach_data = ls_attach

                                              ev_content     = ls_stream-value ).



** Send back the attachment content to the caller.

    ls_header-name = 'Content-Disposition'.

    CONCATENATE 'attachment; filename="' ls_attach-filename '"' INTO ls_header-value.

    set_header( is_header = ls_header ).

    ls_stream-mime_type = ls_attach-mimetype.

    copy_data_to_ref( exporting is_data = ls_stream   changing  cr_data = er_stream ).



  endmethod.

 

Implement GET_ENTITYSET method to read all the attachment information associated to a particular document. ( RefGuid is the field that identifies all the attachments associated with it )
  method ATTACHMENTSET_GET_ENTITYSET.

    DATA lv_ref_guid  type guid_32.

    DATA lr_attachments TYPE REF TO zcl_ut_ui5_attachments.



** Get the RefGuid value to read its associated attachments

    read table it_filter_select_options INTO data(ls_filter) INDEX 1.

    IF sy-subrc = 0.

      READ TABLE ls_filter-select_options INTO data(ls_options)

           INDEX 1.

      IF sy-subrc = 0.

        lv_ref_guid = ls_options-low.

      ENDIF.

    ENDIF.

    CHECK lv_ref_guid IS NOT INITIAL.

*** Your own logic to read the attachments information.

    CREATE OBJECT lr_attachments.

    TRY.

    lr_attachments->get_all_attachment( exporting i_ref_guid = lv_ref_guid

                                        importing rt_attachment = DATA(lt_attach) ).



    SORT lt_attach BY erdat.



** Fill up the return entity

    LOOP AT lt_attach INTO DATA(ls_attach).

      APPEND INITIAL LINE TO et_entityset ASSIGNING FIELD-SYMBOL(<ls_entityset>).

      <ls_entityset>-filename = ls_attach-filename.

      <ls_entityset>-erdat      = ls_attach-erdat.

      <ls_entityset>-created_by = ls_attach-created_by.

      <ls_entityset>-guid       = ls_attach-guid.



    ENDLOOP.

    CATCH ZCX_ATTACHMENT.



    ENDTRY.

  endmethod.

 

Front-End Implementation


This UI5 code works from UI5 version 1.90.0. We are going to implement Attachments using sap.m.upload.UploadSet UI element.

Here is the XML code for the attachments view.
<mvc:View controllerName="test.ztest.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"

	xmlns:core="sap.ui.core" xmlns:upload="sap.m.upload">

	<Shell id="shell">

		<App id="app">

			<pages>

				<Page id="idPage">

					<upload:UploadSet id="idAttach" showIcons="true" uploadEnabled="true" terminationEnabled="true"

						uploadUrl="/sap/opu/odata/sap/ZATTACHMENTS_SRV/AttachmentSet" instantUpload="true" items="{path: 'oModelAttach>/items' }"

						beforeUploadStarts="onBeforeUploadStarts" uploadCompleted="onUploadComplete">

						<upload:items>

							<upload:UploadSetItem fileName="{oModelAttach>fileName}" visibleRemove="true" removePressed="onRemovePressed">

								<upload:attributes>

									<ObjectAttribute title="File Description" text="{oModelAttach>fileName}"/>

								</upload:attributes>

							</upload:UploadSetItem>

						</upload:items>

					</upload:UploadSet>

				</Page>

			</pages>

		</App>

	</Shell>

</mvc:View>

Controller code to Read the existing attachments for a document ( which is RefGuid in our case )
			this.getOwnerComponent().getModel().read("/AttachmentSet", {

				filters: [new Filter("RefGuid", FilterOperator.EQ, "1234")],

				success: function (oData) {

					var json = new JSONModel([]);

					json.items = [];



					for (var i = 0; i < oData.results.length; i++) {

						var item = {

							Guid: oData.results[i].Guid,

							fileName: oData.results[i].Filename,

							meddiaType: oData.results[i].Mimetype,

							url: "/sap/opu/odata/sap/ZATTACHMENTS_SRV/AttachmentSet('" + oData.results[i].Guid + "')/$value",

							uploadState: "Complete",

							CreatedBy: oData.results[i].CreatedBy,

							Erdat: oData.results[i].Erdat,

							selected: false

						};

						json.items.push(item);

					}

					this.getView().getModel("oModelAttach").setData(json);



				}.bind(this),

				error: function (oError) {

					sap.m.MessageToast.show("Error occured reading data");

				}

			});

instantUpload property of UploadSet starts sending the file as soon we choose file or drag and drop on to UI element. We need to send the RefGuid ( Document number, other information if needed  ) along with the request. Here comes the use of iv_slug that we have learnt while implementing DPC_EXT. I am using a comma separated list of fields in slug.

We are making use of beforeUploadStarts event of UploadSet to pass that information.
onBeforeUploadStarts: function (oEvent) {

        var oHeaderItem = oEvent.getParameter("item"),

        slugVal = oHeaderItem.getFileName() + ",1234,ZSD_SAMPLES";

	oHeaderItem.removeAllStatuses();

	oHeaderItem.addHeaderField(new sap.ui.core.Item({

		key: "slug",

		text: slugVal

	}));

	oHeaderItem.addHeaderField(new sap.ui.core.Item({

		key: "x-csrf-token",

		text: this.getOwnerComponent().getModel().getSecurityToken()

	}));

}

Finally, Implementing onUploadComplete event to complete the upload and setAttachmentModel to read the attachments for a particular document (RefGuid in our case)
onUploadComplete: function (oEvent) {

	var oStatus = oEvent.getParameter("status"),

		oItem = oEvent.getParameter("item"),

		oUploadSet = this.getView().byId("idAttach");

	if (oStatus && oStatus !== 201) {

		oItem.setUploadState("Error");

		oItem.removeAllStatuses();

	} else {

		oUploadSet.removeIncompleteItem(oItem);

		this.setAttachmentModel();

	}

},

setAttachmentModel: function () {

	this.getOwnerComponent().getModel().read("/AttachmentSet", {

		filters: [new Filter("RefGuid", FilterOperator.EQ, "1234")],

		success: function (oData) {

			var json = new JSONModel([]);

			json.items = [];



			for (var i = 0; i < oData.results.length; i++) {

				var item = {

					Guid: oData.results[i].Guid,

					fileName: oData.results[i].Filename,

					meddiaType: oData.results[i].Mimetype,

					url: "/sap/opu/odata/sap/ZATTACHMENTS_SRV/AttachmentSet('" + oData.results[i].Guid + "')/$value",

					uploadState: "Complete",

					CreatedBy: oData.results[i].CreatedBy,

					Erdat: oData.results[i].Erdat,

					selected: false

				};

				json.items.push(item);

			}

			this.getView().getModel("oModelAttach").setData(json);

	             }.bind(this),

		error: function (oError) {

			sap.m.MessageToast.show("Error occured reading data");

		}

	});

}

 

Let's see how it works



You can click on upload/ drag and drop files on to the UI element to upload. You can see the status of the uploading file.



Conclusion


The key point here while building this application is to know how to pass the additional parameters to the back-end with the help of slug header parameter from the front-end and how to handle it in the back-end.

 

References


API Reference: https://sapui5.hana.ondemand.com/#/api/sap.m.upload.UploadSet

Sample in Demo site: https://sapui5.hana.ondemand.com/#/entity/sap.m.upload.UploadSet

 

Hope this blog is helpful for you. Feel free to comment/suggest, like, and share.

 
12 Comments
Labels in this area
Popular Blog Posts