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:
Once clicked, there will be a new popup:
Click button “Choose Files”, and you can select multiple files from your local disk using Ctrl key:
once done, it will shows 4 files are selected with each file name:
Click “Upload” button and wait for a while, the successful upload information is displayed:
And the four files just uploaded are now displayed in Attachment assignment block.
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.
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.
(2) 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.
(3) 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.
(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.
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.
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
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
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:
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.
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.
(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.
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 UI 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.
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关推荐
SAP CRM WebClient UI 培训 Slide
CRM7.0 WebClient UI config
C# WebClient 上传文件 WebClient上传文件至服务器
WebClient上传下载源码 我们先在IIS网站中建立一个文件夹,此处为"Mp3",并设置此文件夹相关读写权限。 例1:使用WebClient中的UploadFile方法上传文件。代码如下。使用此方法需要将上传的文件夹权限设置为 IIS来宾...
C# WEBClient 文件上传下载
Sent: Thursday, April 18, 2013 3:59 PM Subject: 为什么design time时候看到的是ICQR,点了service之后看到02QR的代码被call到 这是cross component navigation在起作用。 Result list是model在ICQR里面,如果点...
SilverLight 学习笔记 使用WebClient实现通讯 二 上传和下载流数据
使用WebClient实现文件下载,进度条反应下载进度。
基于WebClient类的Ftp文件上传,使用方便,采用异步模式编程,可支持大文件,文件分包上传,可自定义包大小,代码有两种风格的形式:一个是类库版,一个是组件版 都在一起 效果一样!
WebClient方式上传数据到服务器下
使用WebClient的UploadFileAsync、UploadFile、DownloadFile、DownloadFileAsync方法,异步调用服务器上传下载数据。
Sent: Thursday, May 9, 2013 6:30 PM Subject: ON_NEW_FOCUS的用途 ROOT ———————————— Product ID PRODshortText ———————————— Product Description Genil Model hierarchy
通过WebClient的Postdata将上传文件功能放到另一个网站上去操作
博文链接:https://roger51.iteye.com/blog/123754
本篇文章主要介绍了C#中WebClient实现文件下载,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
C# WebClient实现文件下载 示例源码
通常在WinForm程序中都是采用WebClient方式实现文件上传功能,本身这个方式没有问题,但是当需要上传大文件比如说(300+M)的时候,那么WebClient将会报内存不足异常(Out of Memory Exceptions),究其原因是因为...
UI Guidelines for CRM WebClient User Interface
用银光技术 摸拟网页的Post方法来实现数据上传操作。
webui学习者