Creating a Dynamic Node for a Dynamic Graphic - Tutorial

Question

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      TYPE cl_abap_structdescr=>component_table,
             attribute           LIKE LINE OF lt_attributes,
             struct_type       TYPE REF TO cl_abap_structdescr,
             lo_dyn_node    TYPE REF TO if_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  TYPE string,
                   SERIE1    TYPE i,
                   SERIE2    TYPE i,
                END OF tw_alv.
  TYPES: tt_alv TYPE STANDARD TABLE OF tw_alv.
  DATA: lw_alv  TYPE tw_alv,
              lt_alv   TYPE tt_alv.
  lw_alv-category = 'Alfa'.
  lw_alv-serie1   = 3.
  lw_alv-serie2   = 8.
  APPEND lw_alv TO lt_alv.
  lw_alv-category = 'Beta'.
  lw_alv-serie1   = 4.
  lw_alv-serie2   = 4.
  APPEND lw_alv TO lt_alv.
  lw_alv-category = 'Gamma'.
  lw_alv-serie1   = 1.
  lw_alv-serie2   = 3.
  APPEND lw_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( IMPORTING table = 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.

Answer 1

Hi,
http://htmldb.oracle.com/pls/otn/f?p=26372
then ApEx>Trees and pick a level.
Use Help for more information.
I you think that tree could help I will put more explanation into help page.
Konstantin