** TEAM FPM ** – A new Chart UIBB
In my last blog I described how a Java Script chart library can be integrated on basis of a Freestyle UIBB approach by using the new HTML5 Island of Web Dynpro ABAP. This kind of procedure offers unlimited possibilities to ABAP developers who are familiar with JSON and Java Script, or at least have the time (hours and days) to invest into this topic. Nevertheless, what about developers who are more focused on the application development in the backend system? This often requires a full time investment and an affinity to ABAP – for very good reasons …
During the “HTML5 Island Hype” times we stumbled over a very elegant and nice chart library, named CVOM (Common Visual Object Model) HTML5 Visualization Library. It belongs to the SAP portfolio and was already under investigation by SAPUI5. Soon there was an agreement on having a new FPM Chart UIBB with the complete infrastructure that FPM application developers like and appreciate, and in the meantime we can offer a quite good result to our customers with SAP Netweaver 740 SP4.
Before I go into further detail, just one basic remark on CVOM. This library is built on top of D3 (Data Driven Documents), it renders so-called vector-based graphics via SVG (Scalable Vector Graphics). As a result there is not loss of quality if a graphic is zoomed or resized. Web Dynpro ABAP has provided a corresponding Chart UI Element that renders CVOM charts. You will need a browser that is able to handle HTML5, which is not a problem at all if you take one of the most recent versions.
A Data Driven Approach
There are two different basic use cases to generate charts:
- Data driven approach
- Type driven approach
When following the data driven approach the application developer provides first the data on which a chart is going to be generated. At a later point in time (at the latest during runtime) a chart type is selected that fits to the data provided. In contrast, for the type driven approach the application developer decides first for a chart type and then prepares a data set that fits to the selected type.
The new FPM Chart UIBB (WD component FPM_CHART_UIBB) can be consumed via the data driven approach. This covers the first basic use case and it fits well into the FPM architecture, in which the Feeder Class (the data supplier) means a leading component.
The application developer is never forced to invest into techniques close to the rendering (JSON, Java Script). Instead he/she stays focused on the backend application logic and the corresponding data retrieval from arbitrary data sources (classic DDIC, In-Memory, Cloud, SOA, ODATA etc.), see Figure 1 below.
Basically the data driven approach allows for generating several chart types on one data set. For instance a data set that is being visualized via a Bar Chart can be also rendered as an Area or Line Chart. With restriction to one measure the same data set can be rendered as a Pie Chart or Donut Chart, and so forth.
Figure 1: A data driven approach for the FPM Chart UIBB
The Table Model
Once you start to describe the term data, you will end soon in a discussion on data models. In a first version we offer a simple Table Model that can be addressed by e.g. DDIC table types and that can be efficiently consumed by the SAP Business Suite. We found the table model to be an excellent candidate that should be exposed by the FPM APIs, since it can be easily prepared from most of the DDIC table types. E.g. simply via
DATA: lt_table TYPE << DDIC_TABLE_TYPE >>,
lo_table_descr TYPE REF TO cl_abap_tabledescr.
lo_table_descr ?= cl_abap_tabledescr=>describe_by_data( lt_table ).
The Table Model is provided by the application developer in the Feeder Class (method GET_DEFINITION). Then on configuration level (dynamic or static) Dimensions and Measures are defined on basis of the given columns, i.e. the the single columns (resp. table fields) can be defined either as dimension or measure.
A Dimension is regarded in this context as a range (e.g. City, Country, Month, Year and Currency Code) whereas a Measure is understood as something that can be quantified via numbers only. A Measure can be always used as a Dimension; but a Dimension cannot be converted always in to a Measure.
| Country | Year | Product | Profit | Revenue |
|---|---|---|---|---|
| China | 2001 | Car | 25 | 66 |
| China | 2001 | Truck | 159 | 100 |
| USA | 2001 | Car | 58 | 12 |
| USA | 2001 | Truck | 149 | 34 |
| Canada | 2001 | Car | 58 | 35 |
| Canada | 2001 | Truck | 38 | 232 |
Table 1 Example for the FPM Table Model. Each column is defined either as Dimension or Measure
The Table Model can be accessed via Feeder Interface IF_FPM_GUIBB_CHART. There are three Table Model interfaces:
- IF_FPM_CHART_TABLE_MODEL
- IF_FPM_CHART_TABLE_DATA
- IF_FPM_CHART_TABLE_SELECTION
The first is being exposed via Model Factory interface IF_FPM_CHART_MODEL_FACTORY, method GET_TABLE_MODEL. The second is being exposed via Model Factory interface IF_FPM_CHART_DATA_FACTORY, method GET_TABLE_MODEL. The application developer can access these interfaces within Feeder methods GET_DEFINITION and GET_DATA.
In contrast, the third interface IF_FPM_CHART_TABLE_SELECTION is being exposed via event parameter FPM_CHART_SELECTION of FPM event FPM_CHART_SELECT, and is typically accessed in the Feeder methods PROCESS_EVENT and GET_DATA.
Via Interface IF_FPM_CHART_TABLE_DATA the application developer sets the current chart data set (method SET_DATA). Method GET_DIMENSIONS and GET_MEASURES may be used to enable (resp. optimize) the selection of data in the Feeder Class.
Configuration Environment
On configuration level, creating a new chart the application developer decides first for the Feeder Class. Then an assignment of Measures and Dimensions to the Chart UIBB Schema (see Figure 2) can be done. In a next step the application developer may choose a chart type (different from the default one). the set of available chart types is driven by the amount of Measures and Dimensions and their respective assignment to the axis index and sequence index. An overview can be found in the attached document.
If desired, further changes can be done with regard to size, title, legend, colors etc.by using the General Settings panel (see Figure 3). The General Settings are grouped into Basic Settings, Plot Area, X-Axis, and Y-Axis. The settings displayed for each are dependent on the chart type.
There are also settings (e.g. axis, legend or chart title) that can be changed later during the runtime in the Feeder Class, see the interface IF_FPM_CHART_SETTINGS in method GET_DATA of interface IF_FPM_GUIBB_CHART.
Besides the graphical rendering also a Chart Toolbar can be configured on basis of actions that are defined in the Feeder Class. This approach is well known in FPM, see e.g. the List and Tree UIBB.
Figure 2: Chart UIBB Design Time – Adding Measure and Dimensions to the Object Schema
Figure 3: Chart UIBB Design Time – Changing the chart settings
Personalization Dialog
By definition the data driven approach allows for rendering the data model via different chart types. It is obvious that the end user should also have the possibility to decide for a favorite chart type during the runtime, after the application developer has selected a default chart type during the design time.
The new FPM Chart UIBB provides a personalization dialog on which the end user can make some favorite settings with regard to the chart type, drawing finish, legend visibility etc. (see Figure 4). Before, the personalization dialog has to be enabled on configuration level (see Figure 3).
Figure 4: Chart UIBB Runtime – Personalization Dialog
Accessibility Mode
There is also a corresponding tabular rendering of the chart data with regard to the SAP product standard Accessibility (see Figure 5). The new FPM Chart UIBB will switch to the accessibility mode, if you provide e.g. the URL parameter sap-accessibility=X.
Figure 5: Chart UIBB Runtime – Accessibility Mode
Test and Demo Applications
There are a couple of test (resp. demo) applications that are delivered with SAP Netweaver 740 SP4. Please check out the following application configurations:
- FPM_TEST_CHART_PERS: Chart types, chart events and personlization dialog
- FPM_TEST_CHART: Different chart examples on basis of a dynamic Feeder Class
- FPM_TEST_CHART_SADL_SBOOK: Analyze table SBOOK by using the Service Adaptation Definition Language(SADL) on a HANA database
- WDR_TEST_CHART: Basic features of the Web Dynpro ABAP chart UI element
Additional Concepts
The new FPM Chart UIBB is already productively used by the current SAP Business Suite 7 Innovations 2013. In addition FPM has delivered some additional concepts on top of the new FPM Chart UIBB: You will be amazed 😯 what kind of cool stuff ❗ is related to this! Maybe a couple of additional blogs will be supported via SCN in the near future.
Hi Simon,
Great blog! Trying out some of the applications myself.
Please come up with the blogs on the "cooler stuff" soon 🙂 !
Rohan
Thank you Rohan 🙂
Hi,
Greate job.
Thank you Paul 🙂
Hi Simon,
Good Work. Thanks.
We upgraded recently to 740. I just activated the sample applications FPM_TEST_CHART* in SICF and executed. All of them give a message "Charts are only supported for Standards mode." I have even tried giving parameter WDPREFERREDRENDERING = STANDARDS, still it is not workin. Can you give me some clue 🙂 .
Thanks in Advance.
Hi Aleem,
please try instead the URL parameter sap-wd-htmlrendermode=STANDARDS
Regards,
Simon
Hello Simon,
Thanks for your quick reply. Now I am not getting the message "Charts are only supported for Standards mode". But I dont see the charts. What can be the reason ?
Regards,
Aleem.
Hi Aleem,
it depends on your application. Also the browser should support HTML5 as much as possible, use at least IE9, Chrome, Firefox or Safari.
Did you use one of the test applications mentioned at the end of blog?
Regards,
Simon
Hi Simon,
I also encountered the same issue with Aleem. But my browser is IE11, I think it supports HTML5 fine because it works fine for other HTML5 sites. Then I change to Chrome to test the chart UIBB, then it works. I tested this application mentioned at the end of your blog: FPM_TEST_CHART.
Hi Yongfeng Xu,
I recommend to have a look into the Java Script console, and have a look into the errors here.
Is it possible for you to address this via an CSN message? Maybe start with component BC-WD-CMP-FPM.
Thank you & best regards,
Simon
Hi Simon,
Thanks your reply. Yes, you are right, there is some message from console. It told me the site was recognized as an intranet site, so IE displayed this page in compatibility view. I de-select this setting and refresh the page, the chart displayed well. Thank you again.
please tell me how to define get_data and get_definition method for chart GUIBB
Hi Vishnu,
you may have a look into feeder class CL_FPM_TEST_CHART_CVOM_DATA that implements the feeder interface IF_FPM_GUIBB_CHART.
This feeder class has been used for the demo application (resp. appl. configuration) FPM_TEST_CHART_PERS.
Thank you & Best regards,
Simon
thank I developed chart base fpm application and please can you share some more UIBB like TABBED , form repeater and tree guibb feeder class name or configuration name
Hi Vishnu,
SCN offers a quite good "Getting started" area regarding Floorplan Manager with a lot of learning material, see http://scn.sap.com/docs/DOC-8068
Another option is to look into the standard demos of the Enterpise Procurement Model (EPM), see in TA SE80 the packages S_EPM_UX_PD and S_EPM_UX_PO.
Before running the demo applications, you have to generate some data via TA SEPM_DG
Best regards,
Simon
in preview of GUIBB I am able to see pie , 3d columns but in test I am only able to see list
screen doesn't display charts I did all step correctly please give solution
Hi Vishnu,
seems that you have activated the Accessibility-Mode, in this mode the Charts are rendered as a list.
So if you deactivate ACC-Mode (e.g. via system-setting, URL parameter or SET/GET Parameter) then it should work.
Best regards,
Simon
no sir didn't work if I unchecked accessibility-mode then this didn't show list but also didn't show chart
Hi Vishnu,
please check also the error console of your browser via F12. Best is, to use one of the most recent browser versions.
In case it does not help, please create a OSS customer message on component BC-WD-CMP-FPM. We need to debug this ...
Thank you & Best regards,
Simon
Hi Simon,
Super cool stuff....:) Even FPM also exist in technology race and better UI rendering.
I have adapt it in my application..
Thanks
Praveen Gupta
Hi Praveen,
thank you ... we do our best 😉
Regards,
Simon
Hi Simon,
We run into a problem when we use the new chart UIBB. The starting value of the Y-axis is always 0. If we want to present a series of values like 3.56, 3.20, 3.10, 3.70, 3.80 on chart, we couldn't see the difference between those values clearly. Do you know any way to change the starting value of the Y-axis (to 3.10 instead of 0) ?
Thank you,
Loc Tran
Hi Loc Tran,
unfortunately not yet, but it will be possible with NW740 SAP_UI SP11.
In the meantime you have work with different chart types, e.g. what about using the the waterfall type?
Regards,
Simon
Hi Simon,
Thank you for the info. At the moment, my company wants to use the line chart. Our temporary solution is to find the minimum value, then subtract entire data table with that minimum value. Instead of showing 3.56, 3.20, 3.10, 3.70, 3.80 on the chart, we show 0.56, 0.20, 0.10, 0.70, 0.80. The result is much better.
Again thank you for your help,
Loc
Hi Simon,
Nice Blog!
Which property do I need to use to switch between CHART display and Table display? We currently have a requirement to enable the end user to switch between chart and table display at the UIBB level (not through the application parameter).
Thanks,
Guru
Hi Guru,
thanks a lot! In your case I recommend to use one of the List UIBBs instead and control its visibility by using an AppCC interface. The importing reference of method OVERRIDE_EVENT_OIF/GAF/OVP provides another method to add or remove UIBBs.
Another possibility would be to use a dynamic Context Based Adaption, see e.g. the 3rd chapter here, that would be loaded once you change the corresponding business context.
Best regards,
Simon
In my case charts don't display, instead it keeps showing loading screen. What will be the issue?
Hi Runesh,
please check out the Java Script Console of the browser (-> press F12). If there are any errors I recommend to create a CSS ticket on BC-WD-CMP-FPM or BC-WD-ABA.
Best regards.
Simon
Thanks Simon.
I was getting following error.
Failed to load resource: the server responded with a status of 403 (Forbidden)
********/sap/public/bc/ui5_ui5/1.18/resources/sap/ui/thirdparty/d3.js
We did activated service from SICF & its working Fine Now 🙂 .
Thank You So much.
Regards,
Runesh Kadam.
Hi Runesh,
I have documented your findings in SAP Consulting Note 2180891.
Thank you & Best regards,
Simon
Hi Simon,
This application doesn't open on MAC machine. Could you please tell me what extra settings we need to do to opening chart application.
Thanks & Regards
Praveen Gupta
Hi Praveen,
I am not aware of any extra setting. According to PAM and SAP Note 1634749 (Safari browser for end user and administrators) your probable setup (MAC + Safari) is supported.
Hence it should anaylzed in detail via CSS -> component BC-WD-CMP-FPM
Regards,
Simon
Hi Simon,
Is it possible to have stacked column chart and line chart together in a Combination chart type?
And how could I found the javascript code file which is used to call D3 to draw the charts?
Thanks and BRs Chunyang
Hi Chunyang,
a combined colum stack + line chart is currently not possible.
The Java Script library is delivered via SAP UI5, see the MIME Repository path sap/public/bc/ui5/libraries/ver/<x.x>/com.sap.ui5.viz/
Best regards,
Simon
Hi Simon,
Thanks a lot for your answer!
As far as I understand currently FPM chart GUIBB doesn't support this, but as it works as a feeder to CVOM chart, so if CVOM chart support this kind of complex combined chart, then it could be possible to enhance something on FPM chart WD to feed more setting and data to draw such a chart. Do you think it's possible?
BRs Chunyang
Hi Chunyang,
yes may be that there is some possibility via data feeds. However data feeds are not supported yet in FPM Chart UIBB. We have to discuss this internally, if there is a possibility from NW750 ...
Thank you & Best regards,
Simon
Thanks Simon! It's very helpful.
Hey Simon,
Great Job! I like it.
Best Regards,
Hasan
can we print the charts ?
Four years on and this blog proved very helpful for me to develop my first FPM based Chart. Thank you Simon 🙂
Thank you Ali
Once you develop on Release NW 752 SAP_UI, then please convert your Charts to the new VizFrame Component, see also this blog https://blogs.sap.com/2017/11/20/team-fpm-the-new-vizframe-uibb/
The VizFrame UIBB comes up with a SAP UI5 compliant Rendering. Nevertheless, the ABAP coding (Your Feeder Classes, Configuration Content) ist more or less the same …
Regards,
Simon
Thank you Simon, I did not know about VizFrame component. Kudos for sharing 🙂
Hi,
I implemented a FPM chart application, but I want to change the chart color, for example, the pie section in a Pie Chart Diagram. Do you know how to set the specific color to a dedicated chart part?
BRs
Zac
Hello Zac,
sorry for the late reply. SCN notification engine is not the best 🙂
Of course this is supported for the Chart UIBB! In FLUID -> General Settings you will find correspconding input fields to enter colorpalettes such as ["#60BFF5", "#AFDE49", "#FAC365", "#90D0FF", "#D398DA", "#F1D63E"]
You can design own colorpalettes e.g. via http://paletton.com/
Best regards,
Simon