Technical Articles
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.
- 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)
- 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.
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:
Already a blog is available on this, but with limited and old information and also it was a lengthy process.
Standard Documentation for Reuse Components:
https://ui5.sap.com/#/topic/d869d7ab3caa48b2a20dc20dfa248380
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.
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.
I can confirm after reading the help link that Customer applications can also use this
Yes, I also see it now under UI Integration and Manifest Changes sections.
Thanks.
Great Blog!
Thank you,
Syam
Thanks for the feedback 🙂
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
Hi Gokhan Yilmazturk,
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.
Agree, if class based BOR works with GOS then it should work with attachment service, ideally it should work. Let me know, thanks.
-Mahesh
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
Hi Hemanth,
Import the Attachments library.
Shailaja.
Hi Mahesh,
Your blog helped me a lot on working with reusable attachments.
Thanks,
Shailaja.
Welcome 🙂
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
yes you are right, but is the error coming when you are testing in the webide?
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
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?
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
Hi Mahesh,
So kind of you to reply. Here is my manifest and component file.
Appreciate you help.
Thanks,
~Hemanth
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
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
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
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
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..
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
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.
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
Hi Mahesh,
thanks for your response. can we access the libraries using destination service?
Thanks
Omkar
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🙂
How Can be done the similar developer with BAS/VS code on cloud foundry/On-premise?
Thanks.
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
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:
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.
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
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.
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.
can you please create a question at answers.sap.com for a wider reach?
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
can you please create a question at answers.sap.com for a wider reach?
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
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
Hi Mahesh,
Is this functionality available with ECC 6.0 EHP8 or is it just for S/4 HANA.
Regards
Johnson