Attachment implementation in SAP UI5(CRM and SAP UI5 integration)

In this blog we will demonstrate how to send attachment from SAP UI5 front-end screen to back-end with ODATA.

I came across a requirement, where I have to design a custom FIORI like app. The app contains master and detail page, where master displays list of complaints from CRM and detail page contains the detail of selected complaint, detail includes, item and attachment and header data. The attachment should show in both CRM and well as SAP UI5, UI’s.

The solution shown below can be implemented in any CRM scenario where you require attachments (Attachment can be any type format).

ODATA Section:  As we knows that CRM attachment get stores in Content Server, so we need to read and write our attachment in content server. We are going to use cl_crm_documents class to achieve this functionality.

Below is the step you have to follow to achieve this functionality with ODATA.

1. Create a structure with attachment attribute.

2. Open transaction SEGW, and create entity with the above structure and generate the object.

3. Create another entity like in my case I have created complaint, see below screenshot, so totally there will be two entities.

4. After that you have to select attachment entity type as media( click on Entity Type -> check media check box)

5.  To define mime type of attachment we need to redefine, define method of MPC_EXT class.

                          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 = ‘Complain_Attachments’ ).

                          if lo_entity is bound.

                                lo_property = lo_entity->get_property( iv_property_name = ‘MimeType’ ).

                                lo_property->set_as_content_type( ).

                         endif.

6. After this we have to redefine create stream method of DPC_EXT class , which is the method to add attachment into the content server. See below code

(Please see attached file create_stream)

7. To read the attachment from content server we need to redefine the get_stream method of DPC_EXT class.

  (Please see attached file get_stream)

SAP UI5 Section: To implement the attachment functionality from front-end you have to follow below steps.

1. Write below code in XML vew.In XML view; if you are using IconTabFilter then paste this code inside it.  

<UploadCollection id=”UploadCollection”

maximumFilenameLength=”55″ multiple=”true” items=”{/results}”

showSeparators=”None” change=”handleChange” fileDeleted=”onFileDeleted”

fileRenamed=”onFileRenamed” fileSizeExceed=”onFileSizeExceed”

typeMissmatch=”onTypeMissmatch” uploadComplete=”onUploadComplete”>

<UploadCollectionItem documentId=”{Objid}” fileName=”{Name}” mimeType=”{MimeType}” thumbnailUrl=”{thumbnailUrl}”

url=”{                path: ‘Objid’,

                                                                                                                                     formatter:’crmpoc.formatter.Formatter.getURL’

                                                                                                                                                }”

enableDelete=”true”  enableEdit=”true”/>

</UploadCollection>

Note: you have to do some modification accordingly.

Here I am creating UploadCollection for uploading multiple documents in SAP backend

2. Now write below code in controller of the view.

     We have to implemented onChange event of UploadCollection, this method is responsible to send your attachment into backend, in this method we are doing following things.

1. 1. Getting ‘x-csrf-token’ from ajax request.
2. 2. Setting Upload URL to upload collection.
3. 3. Setting header for the request by adding UploadCollectionParameter.

After this method you will be able to see your attachment in CRM.

(Please see attached file onchange)

3. To read an attachment we have to write a formatter function which will get URL of particular attachment when you will click on file name.

Write below code in Formatter.js

formatter.Formatter = {

       getURL: function(value){

//Return url which is based on your parameters, in our case it is complaint id and values.

               return “<Server URL>/<Service Name>/Complain_AttachmentsSet(Class=’CRM_L_ORD’,Objtype=’L’,ComplaintId='” + lComplainId + “‘,Objid='”+ value +“‘)/$value”;

       }     

};

Please let me know if you are facing any issue in this code and also if you have any new idea reply on this.

Thanks,

JP