Skip to Content
Technical Articles
Author's profile photo Mahesh Palavalli

Attachment Service to your rescue in S4HANA via Fiori Elements using Reuse Components (GOS)

 

Introduction

Many of us already know about the famous GOS functionality available for GUI. We must have used it many standard applications for adding attachments in GUI. It is not only available for standard applications but also available for custom GUI based applications with minimal coding. So what if this kind of functionality is available for Fiori based apps? yes it is provided via the the attachment service.

How I used to handle attachments

Most of us had one or other issue related to Attachments in UI5 and ABAP and would have tried many different ways to save and read attachments. I tried the below two ways till now.

  1. Using Upload collection control – Without posting the data immediately after uploading a file and saving it locally in a json model and push all the attachments via the deep structure once the user clicks on save.   It has many disadvantages, e.g., large data has to be sent in a single request in case of multiple added attachments, which will make ur save slow. (very bad way)
  2. Using Upload collection control – Posting the data to the backend immediately after uploading a file and saving in a temporary table in SAP and the temp attachments in the temporary table will be having an unique ID and when user clicks on save in the Fiori app, I will read the attachments from the temp table based on the unique key and save it to GOS and delete that temp data. (most of the times I do this). This is very fast and best approach and this is kind of inspired from the standard attachment service that I saw in S4HANA.

You can see that the second approach is very clean and light weight right?

and the attachment service provides reuseable ui5 component and some API’s for us to handle this in a very easy way and this will hardly take around 15 lines of code to make it work end-to-end. Let’s see it in action.

Architecture

Taken for SAP help, link

DEMO

Let’s first see the demo of attachment service and how it works in the below video and later move to the development part.

Implementation

Let’s do this in multiple steps.

1. Custom BO GUI GOS Implementation

This steps is to validate if the GOS attachments in the GUI and the attachments added via the attachment service in the Fiori Element app are the same.

In this step, let’s create a dummy report where we can enter the “Carrier ID” ( Flight tables) and in the result page, we should see the GOS toolbar, where can add/view the attachments.

So I created a new Business Object (SWO1, obviously this works for existing Business Objects as well) ZCAR2020, which has only one key field “carrid” from scarr table.

then I create a report, which takes only one input parameter “carrid” and will link the it and above created business object to the GOS toolbar.

check the code below: ref. taken from Naimesh Patel blog

PARAMETERS:
  carrier TYPE scarr-carrid.

START-OF-SELECTION.

  " Set the GOS
  NEW cl_gos_manager( is_object = VALUE #( objtype = 'ZCAR2020' objkey  = carrier )
                      ip_no_commit = abap_false ).

  WRITE: 'GOS test for carrier'.

Very simple code there. Output will be:

After F8

Now clicking on the above highlighted button will show the GOS menu and clicking on the attachments will show the attachments popup.

 

So now we saw how simple it is to add GOS toolbar, which will take care of the attachments for us. This is how it will work typically for other standard apps as well. So let’s use the same BO and integrate it in the attachment service.

2. List Report template app (Fiori Elements) Implementation

Now I will create a list report app for the carrier table, which is a draft enabled application. I created the draft enabled CDS view an BO based on the below blog reference.

https://blogs.sap.com/2019/01/09/abap-programming-model-for-sap-fiori-draft-based-for-non-guid-keys-much-more../

Not posting the code as it is a basic draft enabled CDS view with basic annotations.

Final List report application generated from the above CDS views.

3. Integrating Attachment service with the above generated List Report app

Add the dependencies for the attachment service library (“sap.se.mi.plm.lib.attachmentservice”)

"dependencies": {
			"minUI5Version": "1.38.34",
			"libs": { //-----> This one
				"sap.se.mi.plm.lib.attachmentservice": {}
			},
			"components": {}
		},

Now the idea is to show the attachment component as section in the object page. So we need to add a section in the object page, but it will be a reuse component via the embeddedComponents approach. For more information check the UI5 documentation.

Code to add the reuse attachment component as a section in the object page.

"pages": {
	"ObjectPage|ZC_CarrierBO": {
		"entitySet": "ZC_CarrierBO",
		"component": {
			"name": "sap.suite.ui.generic.template.ObjectPage"
		},
		"embeddedComponents": { ----> Begins here
			"simple::Attachments": {
				"id": "simple::Attachments",
				"componentName": "sap.se.mi.plm.lib.attachmentservice.attachment.components.stcomponent",
				"title": "{{Attachments}}",
				"settings": {
					"mode": "{= ${ui>/editable}?'C':'D'}",
					"objectType": "ZCAR2020",
					"objectKey": "{parts:[{path:'carrid'},{path:'DraftUUID'}],formatter:'attachmentServiceTest.model.formatter.returnAttachmentKey'}"
				}
			}
		}
	}
}

So in the above code, we can see that we are including the embedded components inside the object page and the component name of the attachment service and settings.

The settings are from the attachment service and not specific to reuse component (documentation link).

mode => Tells whether it is create mode or display mode and we are using the binding there with the model – “UI” model which is part of the List report template and it has values “C” for create mode and “D” for display mode, this will be interpreted by attachment service to show/hide the + icon for adding attachments.

This is a common setting and we can copy paste this in all apps

objectType => This is the business object, can be standard or custom

objectKey => Here we will pass the key, in our case, it will be the “carrid”. BUT in case if it is the create scenario, there will be no key field and the key will be the “Draft ID”. So we are using the formatter to create the key dynamically.

 

Formatter Code=> which is used to create the key

sap.ui.define([], function () {
	"use strict";
	var formatter = {};
	formatter.returnAttachmentKey = function (Carrid, DraftUUID) {
		var objectKey = "";
		if (Carrid !== undefined && Carrid !== null && Carrid !== "") {
			objectKey = Carrid;
		} else if (DraftUUID !== undefined && DraftUUID !== null && DraftUUID !== "") {
			objectKey = DraftUUID.replace(/[^a-zA-Z0-9]/g, "");
		}
		return objectKey;
	};
	return formatter;

}, /* bExport= */ true);

In the component.j, just mention the dependencies:

metadata: {
		"manifest": "json",
		dependencies: {
			libs: ["sap.m",
				"sap.se.mi.plm.lib.attachmentservice"
			],
			components: [
				"sap.se.mi.plm.lib.attachmentservice.attachment.components.stcomponent"
			]
		}
}

Last one step, but only for the testing in the WEBIDE, we need to update the neo-app.json file. (add at the end)

"headerWhiteList": [

		"objecttype",

		"objectkey",

		"MarkForDeletion",

		"documentType",

		"documentNumber",

		"documentVersion",

		"documentPart",

		"semanticobjecttype"

	]

 

Now, what left is for us to test.

4. Testing the Display scenario

Check the above demo video for more details.

We can see a new section for “Attachments” added there, which is displaying the attachments reuse component. It is also fetching the attachments that I added in the GOS gui application 🙂 Pretty cool right, just with minimal changes.

5. Configuring the Edit & Save Scenario.

Technically for Create/Edit also this will work but the attachments will not be saved to GOS and are in some temporary table. So we need to call the attachments api’s save method to save the attachments to GOS in the draft class.

  METHOD /bobf/if_frw_draft~copy_draft_to_active_entity.
    DATA:
            carrier_root TYPE zticarrierbo_tpl.
    io_read->retrieve(
      EXPORTING
        iv_node                 = zif_i_carrierbo_tpl_c=>sc_node-zi_carrierbo_tpl                 " Node Name
        it_key                  = it_draft_key                  " Key Table
      IMPORTING
        et_data                 = carrier_root                 " Data Return Structure
    ).

    DATA objectkey      TYPE objky.
    DATA temp_objectkey TYPE objky.
    DATA(attachment_api) = cl_odata_cv_attachment_api=>get_instance( ).
    IF carrier_root[ 1 ]-carrid IS NOT INITIAL.
      TRY.
          objectkey = carrier_root[ 1 ]-carrid.
          temp_objectkey = carrier_root[ 1 ]-key.
          CALL METHOD attachment_api->if_odata_cv_attachment_api~save
            EXPORTING
              iv_objecttype      = 'ZCAR2020'
              iv_objectkey       = objectkey
              iv_objecttype_long = 'ZCAR2020'
              iv_temp_objectkey  = temp_objectkey
              iv_no_commit       = abap_true
            IMPORTING
              ev_success         = DATA(ok)
              et_messages        = DATA(messages).


          DATA(key_util) = /bobf/cl_lib_legacy_key=>get_instance( zif_i_carrierbo_tpl_c=>sc_bo_key ).

          DATA(bobf_key) = key_util->convert_legacy_to_bopf_key(
                                  iv_node_key   = zif_i_carrierbo_tpl_c=>sc_node-zi_carrierbo_tpl
                                  is_legacy_key = objectkey ).

          APPEND VALUE #( draft = it_draft_key[ 1 ]-key active = bobf_key ) TO et_key_link.


        CATCH cx_odata_cv_base_exception INTO DATA(lo_excp).
      ENDTRY.
    ENDIF.
  ENDMETHOD.

 

That’s it folks, It is as simple as using the GOS toolbar in your custom GUI app. All the functionality is provided by SAP themselves in the form of component reusability.

and Thanks to all the devs who made this beautiful reusable application at SAP!!

 

Code reference taken from Suppliers Fiori App.

References:

Attachment service help:

https://help.sap.com/viewer/4c3d1c6b3d744f84aab4c273f979f430/1909.000/en-US/b821e557b83a1070e10000000a44147b.html

Already a blog is available on this, but with limited and old information and also it was a lengthy process.

https://blogs.sap.com/2016/03/23/s4-hana-how-to-consume-attachment-reuse-ui-component-via-smart-template-application/#

Standard Documentation for Reuse Components:

https://ui5.sap.com/#/topic/d869d7ab3caa48b2a20dc20dfa248380

 

Assigned Tags

      43 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shai Sinai
      Shai Sinai

      Great post.

      Well explained and a useful use-case.

       

      However, I wonder if sap.se.mi.plm.lib.attachmentservice is officially released for custom usage.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Shai Sinai for going through the blog ? ?

      I made a simple mistake and forgot to google about “attachment service sap help” before writing this blog ? ?

      Now after your comment and a bit research found a lot of help information about this. I will be updating this blog about that with reference links ? ?

      It looks like it is publicly available as SAP has released the documentation. But cannot confirm  surely on this.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      I can confirm after reading the help link that Customer applications can also use this

      Author's profile photo Shai Sinai
      Shai Sinai

      Yes, I also see it now under UI Integration and Manifest Changes sections.

      Thanks.

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Great Blog!

      Thank you,

      Syam

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks for the feedback 🙂

      Author's profile photo Gokhan Yilmazturk
      Gokhan Yilmazturk

      Hello Manesh,

       

      Great Blog ! The attachment service actually works great with Draft Enabled Transactional Apps & Fiori Elements as well.

      But have you tried using this service for Non-Draft apps as well ? I don't know if that's only me but I am having some problems when using the service for Non-Draft apps...

      Thank you,

      Gokhan

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Hi Gokhan Yilmazturk,

      Thanks for the feedback 🙂
      Ideally it should work in non draft as well. My understanding is that the attachment service really doesn't care about where it is being used, it just needs the key to save the data, in example case, the key will be draft key for create mode and for update and display mode, it will be the actual key.
      So for non draft scenario, we need to make sure we are passing the correct key, for instance, we will not have draft key in non draft scenario create mode, so we need to generate a dummy key and pass it along with the header and save the attachments with the new key that you generate in the backend.
      Thanks,
      Mahesh
      Author's profile photo Paul McFarling
      Paul McFarling

      Rereading this blog, I believe you can accomplish the same thing using a Business class (i.e. implements IF_WORKFLOW) vs creating a BOR. I may have a use case for this. If I do it, I will respond.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Agree, if class based BOR works with GOS then it should work with attachment service, ideally it should work. Let me know, thanks.

      -Mahesh

      Author's profile photo Raya Hemanth
      Raya Hemanth

      Thanks for the information. The attachment service is not loading for me. Getting following error message.

      Error: failed to load 'sap/se/mi/plm/lib/attachmentservice/attachment/components/stcomponent/Component.js' from ../../../../../resources/sap/se/mi/plm/lib/attachmentservice/attachment/components/stcomponent/Component.js: 404 -

       

      Regards,

      ~Hemanth

      Author's profile photo Shailaja Ainala
      Shailaja Ainala

      Hi Hemanth,

      Import the Attachments library.

       

      Shailaja.

      Author's profile photo Shailaja Ainala
      Shailaja Ainala

      Hi Mahesh,

      Your blog helped me a lot on working with reusable attachments.

       

      Thanks,

      Shailaja.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Welcome 🙂

      Author's profile photo Raya Hemanth
      Raya Hemanth

      Shailaja,

      Thanks for the information.

      From where I should import the library. The dependency section in manifest file should take care of loading the library. Appreciate if you can share complete manifest.json file.

      Regards,

      ~Hemanth

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      yes you are right, but is the error coming when you are testing in the webide?

      Author's profile photo Raya Hemanth
      Raya Hemanth

      Mahesh,

      I also though similarly that the error might be related to webide and deployed the code to ABAP repository. Even then I get the same error message. Appreciate your help.

      Thanks,

      ~Hemanth

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      If you follow the same way I did, it should work without any issues for sure.. I hope you are accessing this application via Fiori launchpad, then only it will work (else custom library dependencies will not be loaded).

      If you want to test in webide, you need to right-click on the project, add the reference to the library by selecting that library. Then run it with the local Fiori launchpad, then it works.

      Or you did anything differently?

      Author's profile photo Raksha NG
      Raksha NG

      Hi Team,

       

      Is GOS Feature not available in Fiori App as a part of S4HANA 1909 SP01 ?. Could you please let me know if there is a way to enable it through configuration ?

       

      Thanks,
      Sankar

      Author's profile photo Raya Hemanth
      Raya Hemanth

      Hi Mahesh,

      So kind of you to reply. Here is my manifest and component file.

      Appreciate you help.

      Thanks,

      ~Hemanth

              "dependencies": {
                  "minUI5Version": "1.38.34",
                  "libs": {
                      "sap.ui.core": {
                          "lazy": false
                      },
                      "sap.ui.generic.app": {
                          "lazy": false
                      },
                      "sap.suite.ui.generic.template": {
                          "lazy": true
                      },
                      "sap.se.mi.plm.lib.attachmentservice": {
                          "lazy": true
                       }
                  }
                      
      
                      "pages": {
                          "ObjectPage|ZCHCCTRACKER_TP": {
                              "entitySet": "ZCHCCTRACKER_TP",
                              "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen",
                              "component": {
                                  "name": "sap.suite.ui.generic.template.ObjectPage"
                              },
                              "embeddedComponents": {
                                  "simple::Attachments": {
                                      "id": "simple::Attachments",
                                      "componentUsage": "attachmentReuseComponent"
                                      "title": "{{Attachments}}",
                                      "settings": {
                                          "mode": "{= ${ui>/editable}?'C':'D'}",
                                          "objectType": "ZCCTRACK",
                                          "objectKey": "{ZTRANS_ID}"
                                      }
                                  }
                              }

       

      sap.ui.define(["sap/suite/ui/generic/template/lib/AppComponent"], function (AppComponent) {
      	return AppComponent.extend(""MFE2.zcctracker.Component"", {
      		metadata: {
      			"manifest": "json",
      			dependencies: {
      			libs: ["sap.m", "sap.se.mi.plm.lib.attachmentservice"],
      			components: [ "sap.se.mi.plm.lib.attachmentservice.attachment.components.stcomponent"]
      			}			
      		}
      	});
      });
      Author's profile photo Vishnu Kothuru
      Vishnu Kothuru

      Hi Mahesh,

      Really helpful blog, kudos to you 🙂

      I have tried to implement same using ABAP Restful programming. I got stuck at the time of saving attachments to GOS when we click on Save. I can see post call for 'CV_ATTACHMENT_SRV' but still it is not saving.

      Please help me to accomplish it using RAP, find my scn post on this.

      https://answers.sap.com/questions/13410001/attachments-not-saving-in-abap-restful-programming.html

       

      Regards,

      Vishnu

      Author's profile photo Srinivasu Y
      Srinivasu Y

      Hi Mahesh,

      Very nice blog, it was very clear info related subject topic.

      i am getting error after adding below code in Lib section

      "sap.se.mi.plm.lib.attachmentservice": {}

      TechnicalMessage: "failed to load 'sap/se/mi/plm/lib/attachmentservice/library.js from ../resources/sap/se/mi/plm/lib/attachmentservice/library.js: 404

      Advance thanks,

       

      Regards,

      Srinivasu

      Author's profile photo supreetha Bhat
      supreetha Bhat

      Hi,

       

      When using the same approach as mentioned above, the documents are always getting saved in the DMS and also getting fetched from the same source. How can i change my source as GOS for Fetch and SAVE?

       

      Thanks and Regards,

      Supreetha Bhat

      Author's profile photo rajesh maripeddi
      rajesh maripeddi

      Hello Mahesh Palavalli,

      We have created the list report using SAP RAP but now the other requirement is to upload the data using Excel.

      Do we have any option to upload data using Excel in RAP.

      Thanks in advance.

       

      Regards,

      Rajesh

      Author's profile photo Mohammad Azizur Rahman
      Mohammad Azizur Rahman

      hello Mahesh,

      Great to see the reusability of GOS in Fiori app.

      In our case, we want to use the GOS attachment in ODATA (SEGW project).

      But not sure where can we code example show under the below BOBF method. Any suggestion would be helpful..

      /bobf/if_frw_draft~copy_draft_to_active_entity
      Author's profile photo Subhankar Garani
      Subhankar Garani

      Thanks Mahesh, Awesome blog. I was able to follow your steps are able to implement successfully. My app is working fine from Fiori Launchpad.

      However when I try to use from WebIDE (Fullstack Cloud), I am not getting the suitable library to add as a reference. Do you know which library to add? Otherwise I am getting 404 error which you discussed ealier.

       

      Thank you,

      Subhankar

       

      Author's profile photo Omkar G
      Omkar G

      Hi Mahesh,

      thanks for information. can the Attachment Service Reuse Components be also used for the Custom application deployed on the SAP Cloud Foundry environment as well?

      Thanks & Regards,

      Omkar.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Hi Omkar,

      Welcome 🙂 I believe it will not work in cloud foundry environment as the reuse component needs the libraries from the SAP S/4HANA system.

      Cheers

      Mahesh

      Author's profile photo Omkar G
      Omkar G

      Hi Mahesh,

      thanks for your response. can we access the libraries using destination service?

      Thanks
      Omkar

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      I never tried it 🙁 and doubt if it is possible that way. But u can try that, maybe using an approuter to route the requests to the destination. Let me know if it works, I am really curious now with your idea🙂

      Author's profile photo Massimo Olivieri
      Massimo Olivieri

      How Can be done the similar developer with BAS/VS code on cloud foundry/On-premise?

       

      Thanks.

      Author's profile photo Arquimedes Do Prado Campos
      Arquimedes Do Prado Campos

      Hi Mahesh,

      I've been following your code and trying to implement the attachment service. However, I've been facing a problem with formatter code file.

      (I have little experience with fiori elements )

      I've been receiving the message: Formatter function .... not found

      App name: pocapr

      Namespace: cadreqnam

      And follow the file and filepath that I created

       

      The error message:

      Coudl you help me? Do you know what I'm doing wrong?

       

      Thanks a lot,

      Arquimedes

      Author's profile photo Emanuel Wiehler
      Emanuel Wiehler

      Hello Mahesh

      Really nice blog, which could solve our requirement: we need to store attachments for our reporting application in our S/4-system. However, we do not have the need to create separate FIORI apps, rather then directly calling the attachment service by a parametrized link.

      Could you, maybe, guide me how this could be achieved?

      I created the following semantic object in the FIORI launchpad:

      I then call this semantic object by the link as follows:
      <sap-server>/sap/bc/ui2/flp?sap-client=100&sap-language=DE#ZEW_ATTACHMENT-manage?&mode=&objectType=ZCAR2020&objectKey=LH
      The result is as follows:
      I can upload files, but they are gone as soon as I "switch" to another objectKey or refresh the browser.
      Means it does not save / store the attachments.
      Am I missing something?
      Thanks in advance
      Emanuel
      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Emanuel 🙂

      It's been some time, I think this is draft enabled and on save(external app), a method needs to be called in the backend to save the attachments a shown in this blog post.

      What you can debug and check is if there is any option to directly save on adding an attachment without the draft option.

      Author's profile photo Emanuel Wiehler
      Emanuel Wiehler

      Hello Mahesh

      Thanks for the reply. However, I'm no expert in FIORI topics yet. Where can I debug the app?

      I also tried out your mentioned approach by creating a new FIORI elements list report / object page and adding the mentioned coding fragments. However, I only get the documents uploaded as "draft" version. So how should I implement the final "save" to the database? 

      Regards Emanuel

       

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Ohh, then you need a UI5/javascript experienced developer to debug.

      To save to db, you need to implement an action and on trigger of that action, you need to do actual save in db by calling the class and method I mentioned in this blogpost.

      Author's profile photo Diego Valdivia
      Diego Valdivia

      Hi Mahesh,

      This was a wonderful blog. It helped me to use attachment services using Fiori Elements + Odata V2.

      Is there any chance you know how to use attachment services in an Fiori Elements Odata V4 app?

      As you know, the structure of the Manifest.json file is different in V4. Unfortunately, I wasn't able to find much information about using embedded documents for Odata V4. I only found the next link from SAP Help portal:

      https://ui5.sap.com/#/topic/d869d7ab3caa48b2a20dc20dfa248380

       

      The problem is that, when I try to use attachment services, I'm not able to see the attachment section on my app.

      Thanks in advance.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      can you please create a question at answers.sap.com for a wider reach?

      Author's profile photo Sivakumar Palaniswamy
      Sivakumar Palaniswamy

      Hi All,

      I am not seeing Document Management services option available in the SAP BTP's Service Market place under Free Tier account.

      Please advise how do I leverage the DMS in my Free tier account. Is it specific to region which I choose during creation of space in the sub account overview screen.

       

      Thanks

      Siva

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      can you please create a question at answers.sap.com for a wider reach?

      Author's profile photo Eduardo Ikuta
      Eduardo Ikuta

      Hi, Mahesh!

       

      Great blog!

       

      I'm facing an issue. I'm using Fiori List Report template and oData v2. Even after deployed the app, nothing is showed regarding the attachment service in the Object Page.

      Do you have any idea what is wrong?

      Regards.

       

      Eduardo Ikuta

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks, Eduardo, Please check the network and console log, you might be missing out on something. If you find any issues, create a question at https://answers.sap.com and share it here. So your query can be addressed by a larger audience.

      Cheers,
      Mahesh

      Author's profile photo Johnson Jos
      Johnson Jos

      Hi Mahesh,

      Is this functionality available with ECC 6.0 EHP8 or is it just for S/4 HANA.

       

      Regards

      Johnson