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

[maheshpalavalli]

 

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-...

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/b821e557b83a1070e1000000...

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-temp...

Standard Documentation for Reuse Components:

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

 

[shais]

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.

[maheshpalavalli]

Thanks shais 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.

[maheshpalavalli]

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

[shais]

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

Thanks.

[SyambabuAllu]

Great Blog!

Thank you,

Syam

[maheshpalavalli]

Thanks for the feedback 🙂

[former_member258038]

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

[maheshpalavalli]

Hi gyilmazturk,

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

[pmcfarling]

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.

[maheshpalavalli]

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

-Mahesh

[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

[ShailajaAinala]

Hi Hemanth,

Import the Attachments library.

 

Shailaja.

[ShailajaAinala]

Hi Mahesh,

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

 

Thanks,

Shailaja.

[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

[maheshpalavalli]

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

[maheshpalavalli]

Welcome 🙂

[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

[maheshpalavalli]

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?

[former_member691929]

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

[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"]

			}			

		}

	});

});

[vish89]

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

[sri_y2002]

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

[former_member758604]

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

[former_member575393]

Hello maheshkumar.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

[former_member807906]

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

[Subhankar]

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

 

[Omkar_Ghadashi]

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.

[maheshpalavalli]

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

[Omkar_Ghadashi]

Hi Mahesh,

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

Thanks
Omkar

[maheshpalavalli]

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🙂

[arqui_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

[EWiehler]

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

[maheshpalavalli]

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.

[EWiehler]

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

[maheshpalavalli]

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.

[DiegoValdivia]

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.

[MassimoX]

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

 

Thanks.

[sivapalani10]

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

[maheshpalavalli]

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

[maheshpalavalli]

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

[eduardo_ikuta1]

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

[maheshpalavalli]

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

[johnsonjos]

Hi Mahesh,

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

 

Regards

Johnson

[subbu_potturi]

Hi Mahesh,

Great explanation.

Will this work with an application which does not have a draft concept?

My application is not draft enabled, when I am uploading the files the attachments are saving in the draft table.

Please suggest how to disable the draft.

Attachments are saving in draft table

Thanks,

Subrahmanyam

[maheshpalavalli]

subbu.potturi  I am not sure if it is possible, but even if it's in the draft, on clicking save, you can save them to db by calling that method.

[maheshpalavalli]

I am not sure Johnson.. You can check if the service is there in your system like shown here: https://blogs.sap.com/2020/08/05/activate-available-odata-in-sap-gateway/

[former_member714823]

Hi Mahesh,

Thanks much on the Detailed Info.

Do you have any idea of clearing the attachments after posting them to the Backend.


Regards,
Karteek

[veesatya1975]

very nice blog. 

few queries 

Document Management Service- Application Option - what is the purpose of subsribing to it , if we cannot even see the attachments with DMS View & manage documents?  app

I can see the attachment in open cmis workbench under the krpo

but same does not sync to the DMS View & manage documents app. it shows no folders ? am I missing something?

if I try to open the link from the open cmis https://xxxxxxxxxxxx.hana.ondemand.com/browser/D1/root?objectId=BXdMT8ilu9XOZlCY0hTz9ucLMQ5Yr0GC0h4D...

it shows unauthorized

thanks & regards,

Satya

[Dhirajsap2024]

Hi,

Could you please help or share(manifest.json) file if attachment reuse enabled in RAP V4 Fiori element application. And how to run from BAS.

Added code but getting below error while running:

failed to load JavaScript resource: sap/se/mi/plm/lib/attachmentservice/attachment/components/stcomponent/Component.js in BAS

Regards,

Dhiraj

[JeraldJJackson]

Hi Mahesh,

I want to use this attachment in my RAP Application. Just need some help from you, where should I write the logic for attachment which you mentioned on point no.3