如何在SAP WebClient UI里创建柱状图(bar chart)-阿里云开发者社区

开发者社区> jerrywangsap> 正文

如何在SAP WebClient UI里创建柱状图(bar chart)

简介: 如何在SAP WebClient UI里创建柱状图(bar chart)
+关注继续查看

Recently I am asked by my manager to give him a report containing the number of open, in process and closed tickets assigned to my responsible component. Since I am learning Javascript recently, I decide not to achieve the report via excel but choose Javascript instead.

Here below is the Bar chart created via a third party Javascript library jChartFX.

You can download the library and example from this link.


image.png


You can follow this document to create Bar Chart and embed it in your CRM system.


(1) Upload necessary Javascript file and css file into mime repository


Although there are lots of js and css file in the downloaded library, in this sample only 8 of them are needed:


image.png


You can find all of them from attached file, just rename JChartLib.zip.txt as JChartLib.zip and unzip it.


Go to SE80 mime repository, follow the path “/bc/bsp/sap/crm_ui_frame” to find folder “CRM_UI_FRAME”. Create a folder “jchart” under it via context menu Create->Folder:


image.png


Then click on folder jchart and choose “Create->MIME Object” from context menu, maintain Mime Type as “application/x-javascript” and click Start Editor button:


image.png


The notepad application is automatically launched, and just copy the source code of JavaScript file from the zip file of this document.


Repeat the operation ans ensure all the 8 files are created in mime repository correctly. ( The mime type for css file is “text/css”) Once done, it looks like below:


image.png


(2) Create a new UI component and draw Bar Chart there


copy the source code of file main.html from attachment into the empty view you just created in UI component:


image.png


A brief explanation on the source code of main.html


line18: create a new chart instance

line19: position the chart into html element with ID = divChart1

line20: set chart type as Bar

line21: feed the chart with JSON data

line22: enable 3D effect to make the chart look more fancy

line23~25: set title


image.png

line28~line73: hard code the JSON data stream for chart

line81~line112: since I am not happy with the default color defined in css file, so I redefine them here.

So far, the development of webclient UI component is finished.


(3) Create a new work center and put the UI component into it


Please find step by step about how to achieve it from this link.

Feel free to adapt the source code of this sample to meet with your own requirement.


Update on 2017-05-27

The same step could be performed to integrate other third party JavaScript libraries to WebClient UI framework, see another example from this blog Display count down in WebClient UI.


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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10076 0
如何在SAP云平台ABAP编程环境里创建自己的Z表
选中ABAP包,右键创建一个新的Database Table: 维护表名为ZBOOKING: 表实现的源代码: @EndUserText.label : 'Jerry''s booking' @AbapCatalog.
583 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11889 0
如何在SAP CRM里创建和消费Web service
Created by Wang, Jerry, last modified on Dec 19, 2014 The following steps demonstrates how to expose a function module as a web service in CRM.
1335 0
创建新的SAP CRM product search scenario - 如何在SAP CRM里实现自定义的产品搜索场景
创建新的SAP CRM product search scenario - 如何在SAP CRM里实现自定义的产品搜索场景
9 0
如何在SAP ABAP系统里创建和消费Web Service
如何在SAP ABAP系统里创建和消费Web Service
11 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载