Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
simon_hoeg
Product and Topic Expert
Product and Topic Expert

For our Chart UIBB we have introduced with SAP NetWeaver 7.50 a couple of new features that you should know about :wink: I will briefly demonstrate these on the basis of OVP test application FPM_TEST_CHART_PERS and Chart UIBB configuration FPM_TEST_CHART_11.

1. Export As Portable Network Graphic (PNG)

Customers frequently asked for a possibility to export the graphic in a suitable format like PNG. Since we use HTML5 inline Scalable Vector Graphics, the browser does not provide this out of the box. So we have realized it in NW 7.50 SAP_UI SP0 on the basis of Java Script Library canvg.js

To have this functionality just run the configuration editor (FLUID) and open the General Settings Panel. Here you will find the field Export (see Figure 1). There are three options: Disabled, Enabled (Chart Toolbar), Enabled (Panel Header). The first options is the default value, with the second option you can enable the feature in the Chart Toolbar. Use the third option, if you want that function in the panel header (so-called exposable action) inside of an Overview Page Floorplan.

Figure 1: FLUID - Enabling the Export as PNG

During the FPM runtime it looks like this (see Figure 2): Once you click on function a browser dialog asks for a download of file ChartUIBB.png (see Figure 3).

Figure 2: Export function during FPM runtime

Figure 3: Browser dialog to download the portable network graphic

2. Advanced Personalization

So far we offered for the Chart UIBB a Basic Personalization in which you could change the chart type, set the drawing finish and some visibilities (legend, tooltip and animation) . Now with NW 7.50 SAP_UI SP2 we provide an Advanced Personalization in which you can assign measures and dimensions and edit their indices.


There are two possibilities to get this feature: Either run the FPM application with URL parameter sap-config-mode=X (Administrator Mode) or enable the Advanced Personalization in the General Settings of the Flexible UI Designer.


Figure 4: FLUID - Enabling the Advanced Personalization

During the runtime it looks this (see Figure 5): If you click on function on the right hand side of the Chart Toolbar the Advanced Personalization Dialog appears.



Figure 5: Chart UIBB - Advanced Personalization Dialog


Via Browse & Collect you can assign and remove measures and/or dimensions regarding the shown data. In addition you can adapt their axis and sequence indices. This of course determines the number of available chart types. The type itself can be set below. This way you can change your graphic very quickly to gain more insight from the data (see Figure 6).


Figure 6: Personalized Chart UIBB


3. Alternative List Rendering

So far we offered a tabular rendering of the chart data within the accessibility mode. But customers asked for dynamic switch between the graphic and tabular rendering. So we introduced with NW 7.50 SAP_UI SP3 the Alternative List Rendering (based on FPM List UIBB ATS) that can be enabled during the FPM Design Time (see Figure 7).

Figure 7: FLUID - Enabling the Alternative List Rendering

During the runtime it looks this (see Figure 8): Once you click on buttonthe graphic rendering turns into the tabular rendering. In this mode you benefit from standard List UIBB ATS features, such as Sorting & Grouping, Search (Ctrl-F) and Export to Spreadsheet.


Figure 8: Chart UIBB - Alternative List Rendering

Thanks for your attention :smile:

2 Comments