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.

       /wp-content/uploads/2015/06/app_726846.png

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.

     structure.PNG

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

     entity.PNG

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

     entity architecture.PNG

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

To report this post you need to login first.

19 Comments

You must be Logged on to comment or reply to a post.

  1. Ahmed ElManawy

    Thank you Jay for useful info,

    I followed your steps but I’m facing a problem, getting 405 (Method Not Allowed) error when posting to the service using the upload URL, I added a break point in create stream method in DPC_EXT, but the request didn’t reach it. Also, I’m confused why you are sending slug as a request header with file name twice “oEntry.NAME” and “oEvent.getParameter(“mParameters”).files[0].name” which is already assigned to “oEntry.NAME”.

    FYI: The following code is missing in the onChange method:

    var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({

       name : “x-csrf-token”,

       value : header_xcsrf_token
    });

    Best Regards,

    (0) 
    1. Jay Prakash Singh Post author

      Hi Ahmed,

      In CRM ,when you are attaching any document , it will open a popup , which will show you file name and name and other parameter which requires to attach a file.

      Now here in below code i am trying to send these parameter as a slug, becuase in attachment you can send data with slug(hope this will clear why i am sending slug)

      Below code what i am doing i am assignign name in both parameter because while attaching from sap ui5 , i am not giving any popup like crm have(this is as per my requirement)

      oEntry.FILE_NAME = oEvent.getParameter(“mParameters”).files[0].name

      oEntry.NAME = oEvent.getParameter(“mParameters”).files[0].name

      so for below lines you can send oEntry.FILE_NAME instead of oEvent.getParameter(“mParameters”).files[0].name .

      var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({

                      name : “slug”,

                      value : oEvent.getParameter(“mParameters”).files[0].name or   oEntry.FILE_NAME

                    

                    });

                    

                                 

                     var oCustomerHeaderSlug3 = new sap.m.UploadCollectionParameter({

                      name : “slug”,

                      value : oEntry.NAME

                    

                    });

      yes below code is slipped out ,sorry please add this in begining.

        var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({

               name : “x-csrf-token”,

               value : header_xcsrf_token

             })

      Also if you are still facing issue please let me know , above code is tested and workign parfectly for me 🙂

      (0) 
      1. Ahmed ElManawy

        Thank you for fast response, now it’s clear. Do you know why I’m getting this error 405 (Method Not Allowed) as I mentioned in my post above.

        Regards,

        (0) 
        1. Jay Prakash Singh Post author

          Hi Ahmed,

          Please let me know where are you getting this error means are you getting this error in back-end or front-end, please give me the code what are u trying to achieve.

          Thanks,

          JP

          (0) 
          1. Ahmed ElManawy

            Hi JP,

            The error is raised from NWGW before reaching the back-end code. Not from the sapui5 application, it’s raised as a reply from NWGW service. I double-checked the code, it’s exactly the same.

            Regards,

            (0) 
  2. Lesedi Damane

    Hi Jay,

    How did you send both the complain_attachments and complaint to the back-end? In my case I had application and application_attachments. I created an new entry for the application and sent it to the back-end using submitChanges method of the odatamodel and called uploadCollection.upload() on the success method of the submitChanges but the attachments don’t get uploaded in this way, they only get uploaded when I call upload() method by itself on a separate method and this necessitates having two buttons for submitting the attachments and submitting the application.

    (0) 
      1. Abhishek Sinha

        Hello Jay,

        I have implemented get_Stream and update_stream in DPC class.

        in ui5 i have upload collection and have implemented change() method.

        I set the uploadUrl and the parameter slug then i called upload() method of the uploadcollection.

        I ui5 the busy indicator never stops and there is a message wait for server to respond. Even update_stream is not getting called.

        I debugged further to FileUploader.js and found that the InstantUpload should be set to false.

        FileUploader.js Code :

        h.prototype.upload = function() {

                if (this.getInstantUpload()) {

                    q.sap.log.error(“Not a valid API call. ‘instantUpload’ should be set to ‘false’.”);

                }

                var e = this._aFileUploadersForPendingUpload.length;

                for (var i = 0; i < e; i++) {

                    this._iUploadStartCallCounter = 0;

                    this._aFileUploadersForPendingUpload[i].upload();

                }

            }

        I made InstantUpload to false but still gatway is not getting hit.

        Please guide me how to upload files.

        Thanks,

        Abhi

        (0) 
  3. Tri Le Minh

    Hello Jay Prakash Singh,

    I have issue when reading file from content server in CRM integrating with SAP UI5. I’m interested in your solution here. But I couldn’t see your attachments on this post. Could you please reupload it?

    Thank you.

    (0) 
  4. Mansi Dixit

    Hello Jay Prakash Singh,

    Somehow the attachments in your blog are not visible now. For point 6 and 7, only “(Please see attached file create_stream)” this message is visible. Could you please add the attachments again.

     

    Thanks,

    Mansi

    (2) 

Leave a Reply