Skip to Content
Author's profile photo Former Member

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.

       /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

Assigned tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kunal Jauhari
      Kunal Jauhari

      Superbb Work JP 🙂

      Clears the basic most doubt !!!

      Good going

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Soon i will post other operation rename and delete

      Author's profile photo Former Member
      Former Member
      Blog Post Author
      Author's profile photo Former Member
      Former Member

      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,

      Author's profile photo Former Member
      Former Member
      Blog 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 🙂

      Author's profile photo Former Member
      Former Member

      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,

      Author's profile photo Former Member
      Former Member
      Blog 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

      Author's profile photo Former Member
      Former Member

      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,

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      please give me the code and also the action which you are going to perform.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Please give me the code also which action you are performing?

      Author's profile photo Lesedi Damane
      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.

      Author's profile photo Abhishek Sinha
      Abhishek Sinha

      Hello Jay Prakash Singh


      I follwed your example i am not not able to put attachments to backend system thorugh uploadCollection control.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Abhishek,

      Let me know where are u getting issue?

      Thanks

      Jay

      Author's profile photo Abhishek Sinha
      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

      Author's profile photo Abhishek Sinha
      Abhishek Sinha

      Hello Jay,

      One question, the upload url should have proxy/ ?

      I am getting error like MEthos is not allowed .

      FileUploader.js:6 POST

      http://localhost:50868/Text/proxy/http/<host>:<port>/sap/opu/odata/sap/ZZTEST_SRV/attchmentSet('Book1.txt')/$value 405 (Method Not Allowed)

      Author's profile photo Former Member
      Former Member

      Thank you for the clear example, but where is the onChange code? I don't see attachments on this post.

      thanks

      Author's profile photo Former Member
      Former Member

      Hello Former Member,

      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.

      Author's profile photo Mansi Dixit
      Mansi Dixit

      Hello Former Member,

      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

      Author's profile photo Former Member
      Former Member

       

      Hello Former Member,

      Attachment is not available. Could you please share to dhamu.satiz@gmail.com Please.

       

      Thanks,

      Dhamodharan

      Author's profile photo harish vyas
      harish vyas

      Hi Jay Prakash,

       

      I am implementing UploadCollection UI element but some how when I am trying to upload the file, it is not calling CREATE_STREAM method in DPC_EXT class.

      Couple of points:

      1. I am setting the value of uploadURL property of UI element while defining it in XML view i.e. uploadUrl=”/sap/opu/odata/sap/ZPROJ_DNT_ATTACHMENT_SRV/ZENT_ATTACHMNT_DETSet”
      2. What should be the value of InstandUpload parameter?
      3. Is defining Items while defining the UI element necessary?
      4. While trying to upload I get the error "File Upload Failed:  Unable to get property '0' of undefined or null reference - "

      Regards,

      Harish