Recently several customers have asked for multiple attachment upload functionality in CRM. As current UI component GS_CM does not support this, I have built a simple prototype to achieve it. Although the UI does not look so good, it could fundamentally support multiple attachment upload at the same time.

How does this prototype looks like

I have created a new button in UI component GS_CM:

/wp-content/uploads/2014/08/clipboard1_526254.png

Once clicked, there will be a new popup:

/wp-content/uploads/2014/08/clipboard2_526255.png

Click button “Choose Files”, and you can select multiple files from your local disk using Ctrl key:

/wp-content/uploads/2014/08/clipboard3_526262.png

once done, it will shows 4 files are selected with each file name:

/wp-content/uploads/2014/08/clipboard4_526263.png

Click “Upload” button and wait for a while, the successful upload information is displayed:

/wp-content/uploads/2014/08/clipboard5_526264.png

And the four files just uploaded are now displayed in Attachment assignment block.

/wp-content/uploads/2014/08/clipboard6_526265.png

How does the prototype work

The major steps to finish this prototype are listed below.

1. Enhance UI component view GS_CM/DocList

Create a new event handler EH_ON_MULTIPLEUPLOAD.

/wp-content/uploads/2014/08/clipboard7_526266.png


METHOD eh_on_multipleupload.
    DATA: lr_popup    TYPE REF TO if_bsp_wd_popup.
    DATA: lv_product_guid TYPE string.
    lv_product_guid = me->typed_context->cmbusobj->collection_wrapper->get_current( )->get_property_as_string( 'INSTID' ).
    cl_zupload_main_impl=>product_guid = lv_product_guid.
    lr_popup = me->comp_controller->window_manager->create_popup(  iv_interface_view_name = 'ZUPLOAD/MainWindow'
                                                                   iv_usage_name          = 'ZUPLOAD'
                                                                   iv_title               = 'Multiple Upload' ).
    lr_popup->set_display_mode( if_bsp_wd_popup=>c_display_mode_plain ).
    lr_popup->set_window_width( 700 ).
    lr_popup->set_window_height( 700 ).
    lr_popup->open( ).
  ENDMETHOD.

1. in Event handler implementation, it is necessary to pass the guid of current product to the multiple file upload popup view. The offical way to pass this argument is via contenxt node binding. Since this is a prototype, I just achieve this by storing the product guid to a static attribute ( cl_zupload_main_impl=>product_guid ) of popup view controller.

2. UI component view ZUPLOAD/MainWindow contains the major logic to support multiple upload, which we will create later.

Create a new button in GS_CM/DocList

Append the following code to method CL_GS_CM_DOCLIST_IMPL~FILL_BUTTONS:

* MULTIPLE UPLOAD ENHANCEMENT – BEGIN

* Separator

  CLEAR ls_button.

  ls_button-type     = cl_thtmlb_util=>gc_separator.

  APPEND ls_button TO gt_button.

  CLEAR ls_button.

  ls_button-id       = ‘newMultiple’.                   “#EC NOTEXT

  ls_button-type     = cl_thtmlb_util=>gc_icon_new.

  ls_button-text     = ‘Multiple upload’.

  ls_button-on_click = ‘multipleUpload’.                   “#EC NOTEXT

  ls_button-enabled  = lv_enabled.

  APPEND ls_button TO gt_button.

* MULTIPLE UPLOAD ENHANCEMENT – End

Add component usage to ZUPLOAD.

Since now component ZUPLOAD does not exist, you can do this step later when you have finished the component creation.

/wp-content/uploads/2014/08/clipboard8_526267.png

2. Create new UI component ZUPLOAD.

Create a new UI component ZUPLOAD and a new view, paste the source code from document attachment “ZUPLOAD_main.html” to the view.

/wp-content/uploads/2014/08/clipboard9_526268.png

Brief explanation on the design of ZUPLOAD/main.htm

2.1 a control to support multiple file selection

We enable multiple file selection by using control input with attribute “multiple” equals to true. For more detail about this, please google with keyword “html5 fileupload multiple”. For sure if you need to use this multiple upload functionality, you must use a browser which supports this html5 tag attribute, like Chrome.

/wp-content/uploads/2014/08/clipboard10_526269.png

line 106: onchange=”printFiles(this.files)”: once files are selected, this function is called to display the name of chosen files.

line 108: onclick=”my_upload(<%= lv_uuid %>);”: once clicked, this function will submit the file upload request to ABAP server

2.2 populate the url to be sent to ABAP server

/wp-content/uploads/2014/08/clipboard11_526270.png

currently I hard code the url in Javascript code in line 34. the path “/sap/crm/file_upload” actually represents an ICF node, which we will create in next step. The product uuid passed from Product overview page is appended to the url.

2.3 submit file upload request via HTTP Post

/wp-content/uploads/2014/08/clipboard12_526271.png

The request is submitted via Javascript built-in object XMLHttpRequest.

3. Create and implement SICF node

After the HTTP post is sent to ABAP server, the SICF node will actually pick up this request and create attachment accordingly.

Create a new ICF node under path /default_host/sap/crm:

/wp-content/uploads/2014/08/clipboard13_526272.png


Currently I just hard code the BOR type BUS1178 for product in the implementation, feel free to change it to other BOR type if necessary.

/wp-content/uploads/2014/08/clipboard14_526273.png

Activate SICF node and now this prototype is ready to use.

Useful tools during my development of this prototype

1. Chrome F12 development tool

I use the tab Network to monitor whether the multipart/form-data request assembled in my Javascript is correct.

/wp-content/uploads/2014/08/clipboard15_526274.png

2. Winhex

I need to ensure the binary content of my local file and the content sent via Javascript and received in ABAP server are exactly the same. For non-text files I could not directly view their binary content in Chrome development tools, so I use Winhex.

/wp-content/uploads/2014/08/clipboard16_526275.png

/wp-content/uploads/2014/08/clipboard17_526276.png

Limitations of this prototype

1. currently the HTTP post url for file upload is hard coded in Javascript code. This could be changed that the url containing host name and port number is populated in ABAP instead.

2. currently after the multiple upload popup is closed, the attachment assignment block is not automatically refreshed. We need to navigate to other UIs and back in order to see the latest uploaded files through this prototype.

3. existing feature like Authorization Scope is not integrated in this prototype. ( this is technically feasible and not difficult ).

4. the UI look-and-feel is not so consistent with SAP CRM UI.

I will continually improve on this prototype if allows.

To report this post you need to login first.

10 Comments

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

  1. Carsten Kasper

    Hi Jerry,

    interesting blog! It will definitely help a lot of people, and SAP customers, to work even faster with their CRM implementation. Hope some day it will be integrated into SAP Standard.

    A while ago I created a simple multi uploader for CRM. I choose to integrate it in the GSCM component as well, but in the Upload file popup. One problem I struggled with was the ability to select multiple files at once. This was due to Internet Explorers lack of support.

    In your Screenshots I saw that you are using Google Chrome. Did you try Internet Explorer as well? How did you get the multi file selection to work? Everywhere I looked on the Internet I read that it could not be done without Flash or Silverlight.

    cheers Carsten

    (0) 
  2. xiazhi 33

    Hi Jerry,

    I’am Sorry.

    I am english is very pool.

    A.jpg

    文件上传成功了,但是没在下面显示出来哈!


    “And the four files just uploaded are now displayed in Attachment assignment block”.


    /wp-content/uploads/2014/10/b_561511.jpg


    麻烦指点一下啊~ 3Q·


    我的邮件地址是 280139286@qq.com.


    我给您发了邮件的哈,空了麻烦看下哈!

    (0) 
      1. Hamid Abdul

        Hi Jerry


        Upload Button is not responding.

        After impingement all above steps , when I choose files , a messages is appeared as jpg is xxx.jpg ready for upload. But when clicked on Upload Button , no response. Any idea?

        (0) 

Leave a Reply