How to use Web Dynpro UI element – “BusinessGraphics” with Static and Dynamic Programming
This UI element enables us to use several chart types in our WD application.The Internet Graphics Service (IGS) helps us to work with this UI element,being able to show graphics in a browser.
The chart engine is a C++ library that supports chart types, from simple charts (e.g. bars or pie) to complex charts(e.g. gantt).We create a WD Component with the structure presented in Fig. By using the BusinessGraphics UI element,we show the graphical illustration of the data stored in the database table YPERSON.
WD component structure
Context structure
The node person has the dictionary structure YPERSON, cardinality 1...n, Singleton. From this structure,we choose only LASTNAME and AGE. We have used a chart of columns type,to graphically display the data contained by the columns of our database table.
View Layout
By using the supply function, we populate the node PERSON with data from the database table YPERSON. We select all the data from the two columns LASTNAME and AGE.
Runtime
To perform customizing settings for business graphics, we have to use the SAP Chart Designer. We access this tool by double-clicking on the chart picture, in the view layout. Now,the SAP Chart Designer is open and we can customise our chart (Fig).
Chart designer
We save the settings we made; the Framework generates a MIME file in XML format and sets the property customizing of the BusinessGraphics UI element (Fig).
Saving the customizing in a XML file
Runtime result
Dynamic Programming
RUNTIME CLASS: CL_WD_BUSINESS_GRAPHICS
Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a BusinessGraphics UI element (Table). For a BusinessGra .
The Category object has the CL_WD_CATEGORY runtime class.The Series can be Series,runtime
CL_WD_SERIES or SimpleSeries,runtime class CL_WD_SIMPLE_SERIES
The implementation of a dynamic BusinessGraphics UI element(with a SimpleSeries and a Category)contains the following statements (Listing).
Dynamic creation of a BusinessGraphics UI element
METHOD wddomodifyview.
DATA lr_flow_data TYPE REF TO cl_wd_flow_data.
DATA lr_container TYPE REF TO cl_wd_uielement_container.
DATA lr_businessgraphics TYPE REF TO cl_wd_business_graphics.
DATA lr_category TYPE REF TO cl_wd_category.
DATA lr_simpleseries TYPE REF TO cl_wd_simple_series.
IF first_time EQ abap_true.
lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').
lr_businessgraphics = cl_wd_business_graphics=>new_business_graphics(
id = 'BGR'
chart_type = cl_wd_business_graphics=>e_chart_type-columns
dimension = cl_wd_business_graphics=>e_dimension-two
height = 300
width = 300
bind_series_source = 'PERSON'
customizing = 'D57PJD6VB3MQAZR78XQHWTMIT.xml' ).
lr_flow_data = cl_wd_flow_data=>new_flow_data(element = lr_businessgraphics).
lr_container->add_child(lr_businessgraphics).
lr_category ?= cl_wd_category=>new_category(id = 'CATEGORY'
bind_description = 'PERSON.LASTNAME'
tooltip ='Candidates last name').
lr_simpleseries ?= cl_wd_simple_series=>new_simple_series(id ='SIMPLESERIES'
label ='Candidate Age'
bind_value ='PERSON.AGE'
tooltip ='Candidate Age' ).
lr_businessgraphics->set_category(the_category = lr_category).
lr_businessgraphics->add_series(the_series = lr_simpleseries).
ENDIF.
ENDMETHOD.