如何实现SAP WebClient UI附件批量上传-阿里云开发者社区

开发者社区> jerrywangsap> 正文

如何实现SAP WebClient UI附件批量上传

简介: 如何实现SAP WebClient UI附件批量上传
+关注继续查看

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:


image.png


Once clicked, there will be a new popup:


image.png


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


image.png


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

image.png



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


image.png


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


image.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.


image.png

(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:


image.png

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.


image.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.


image.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.


image.png


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

line 108: οnclick=”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


image.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


image.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:


image.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.


image.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.


image.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.


image.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 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.


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9404 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11155 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12014 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9022 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11785 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4615 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21866 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6874 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载