Hi everyone,
I'm sharing my first tutorial, hope it'll be helpful for you.
In the Layout tab, it's possible to create an UI element "Business Graphic". It's a very simple tool that only requires a context node with a category attribute (that means, the values that will appear in the 'x' axis) and one or more series (each one with a color, generally a numerical value). It's possible to add a label for each series for better understanding of the Graphic.
Although it's a very powerful tool, there are some problems when we must create a graphic with N series and different labels. If the graphic use an ALV or internal table to fetch data, during runtime we can have more or less series. The definition of a static node and generic series is not enough in this case. That's why I'd like to present you this little tutorial to create a dynamic node that fetchs a dynamic graph:
In the WDDOINIT or Event Handler method that starts the application (once the data is available) we should create the dynamic node in the following way:
DATA:lr_node_info TYPE REF TO if_wd_context_node_info,
lt_attributes TYPEcl_abap_structdescr=>component_table,
attribute LIKE LINE OF lt_attributes,
struct_type TYPE REF TO cl_abap_structdescr,
lo_dyn_node TYPE REF TOif_wd_context_node.
* Let's suppouse we can LOOP at the data table, so we can fetch the category data type (for example company name, month, year, ...)
* and each series with a numeric type
attribute-name = 'CATEGORY'.
attribute-type ?= cl_abap_datadescr=>describe_by_name( 'STRING' ).
INSERT attribute INTO TABLE lt_attributes.
attribute-name = 'SERIE1'.
attribute-type ?= cl_abap_datadescr=>describe_by_name( 'I' ).
INSERT attribute INTO TABLE lt_attributes.
attribute-name = 'SERIE2'.
attribute-type ?= cl_abap_datadescr=>describe_by_name( 'I' ).
INSERT attribute INTO TABLE lt_attributes.
* Once we have all the attributs for the node, we create a formal structure
struct_type = cl_abap_structdescr=>create( lt_attributes ).
* Now we can get the context information to add a new node
lr_node_info = wd_context->get_node_info( ).
* Create the node
lr_node_info = lr_node_info->add_new_child_node(
name = 'GRPH_DYN'
IS_MANDATORY = ABAP_false
IS_MULTIPLE = ABAP_true
STATIC_ELEMENT_RTTI = struct_type
IS_STATIC = ABAP_false ).
* Now we should populates the node, I'll create a hardcoded table, simulating the internal table that you should already have
TYPES: BEGIN OF tw_alv,
category TYPEstring,
SERIE1 TYPE i,
SERIE2 TYPEi,
END OF tw_alv.
TYPES:tt_alv TYPE STANDARD TABLE OF tw_alv.
DATA: lw_alv TYPEtw_alv,
lt_alv TYPEtt_alv.
lw_alv-category = 'Alfa'.
lw_alv-serie1 = 3.
lw_alv-serie2 = 8.
APPEND lw_alv TOlt_alv.
lw_alv-category = 'Beta'.
lw_alv-serie1 = 4.
lw_alv-serie2 = 4.
APPEND lw_alv TOlt_alv.
lw_alv-category = 'Gamma'.
lw_alv-serie1 = 1.
lw_alv-serie2 = 3.
APPENDlw_alv TO lt_alv.
* Now let's call the recently created node and bind the lt_alv table.
* Get node from context
lo_dyn_node = wd_context->get_child_node( name = 'GRPH_DYN' ).
* Bind table with ALV Container
CALL METHOD lo_dyn_node->bind_table
EXPORTING
new_items = lt_alv.
* It's always good to check if the table was succesfully binded. I refresh the lt_alv table and get the values from the node for controlling
REFRESH lt_alv.
lo_dyn_node->get_static_attributes_table( IMPORTINGtable = lt_alv ).
There are other ways of adding a node structure in the method add_new_child_node, but it works for me only with STATIC_ELEMENT_RTTI. The node is now created and has the data required for the graphic. Now, we should go to WDDOONMODIFYVIEW, or save the target view as a parameter, to create the graphic, bind the category and series and show it on the screen.
DATA: lr_graph TYPE REF TO cl_wd_business_graphics,
lr_cat TYPE REF TO cl_wd_category,
lr_series1 TYPE REF TO cl_wd_simple_series,
lr_series2 TYPE REF TO cl_wd_simple_series,
lr_container TYPE REF TO cl_wd_uielement_container,
lr_flow TYPE REF TO cl_wd_flow_data.
* Get the root element from the Layout or the specific container you have created for the graphic
lr_container ?= view->get_element( 'ROOTUIELEMENTCONTAINER' ).
* Creates a line busniess graph
lr_graph = cl_wd_business_graphics=>new_business_graphics(
BIND_SERIES_SOURCE = 'GRPH_DYN'
CHART_TYPE = cl_wd_business_graphics=>e_chart_type-lines
HEIGHT = 340
WIDTH = 750
ID = 'GRAPH' ).
* Create the flow data for the new UI Element business graphic
lr_flow = cl_wd_flow_data=>new_flow_data( element = lr_graph ).
* Set graph in the root container from the Layout tab
lr_container->add_child( lr_graph ).
* Bind the category from the dynamic node to the dynamic graphic
lr_cat = cl_wd_category=>new_category(
view = view
bind_description = 'GRPH_DYN.CATEGORY'
tooltip = 'Company Name' ).
lr_graph->set_category( lr_cat ).
* Bind the two series from the dynamic node to the dynamic graphic
lr_series1 = cl_wd_simple_series=>new_simple_series(
bind_value = 'GRPH_DYN.SERIE1'
label = 'Sales'
view = view
tooltip = 'Average Sales' ).
lr_graph->add_series( lr_series1 ).
lr_series2 = cl_wd_simple_series=>new_simple_series(
bind_value = 'GRPH_DYN.SERIE2'
label = 'Purchases'
view = view
tooltip = 'Average Purchases' ).
lr_graph->add_series( lr_series2 ).
Finally we have created our business graphic. Test the application and you'll see something like the attached image.
Hope you'll find it useful.
Daniel Monteros.