Skip to Content

Graphical charts are used to display organizational relationships among business partners of different kind. For instance, a contact with relationship to other contacts can be displayed in a graphical chart rather than in a table view like BP_DATA/AccountRelationshipEF.

Graphical chart is displayed in an applet window using graphics extension tags and the JNet extension used for CRM Buying Center.

Account 6000000252 – ArunKumar Balakrishnan, has its relationships displayed in a tableview:

/wp-content/uploads/2012/09/1_135306.jpg

Organizational relationships in a hierarchical graphical representation:

/wp-content/uploads/2012/09/2_135391.jpg

Generating a graphical chart for organizational relationship involves 3 steps,

1.       The first step is to generate the graphical data in XML format

2.       Store the XML data in ICM using class CL_HTTP_RESPONSE and build a url.

3.       Call the graphical extension in view layout using the generated URL.

Let’s discuss each step in detail.

First, the graph layout and the user interface specifications are generated in XML format using cl_ixml class. 

* Type pools declarations
     TYPE-POOLS: ixml.

* Class declarations
     CLASS cl_ixml DEFINITION LOAD.


* create xml document
     l_ixml           = cl_ixml=>create( ).

     l_doc           = l_ixml->create_document( ).

* Build xml file
     l_root           = l_doc->create_simple_element( name = ‘SAPJNetData’ parent = l_doc ).
     rc                = l_root->set_attribute( name = ‘version’ value = ‘1.0’ ).
     l_element     = l_doc->create_simple_element( name = ‘Application’ parent = l_root ). “#EC NOTEXT
     rc                = l_element->set_attribute( name = ‘type’ value = ‘BC2’ ).
     rc                = l_element->set_attribute( name = ‘version’ value = ‘1.0’ ).

* Start of User Interface data
     l_ui              = l_doc->create_simple_element( name = ‘UserInterface’ parent = l_root ).
     rc                = l_ui->set_attribute( name = ‘href’ value = ‘apps/bc2/UserInterface.xml’ ).
     rc                = l_ui->set_attribute( name = ‘version’ value = ‘1.0’ ).

  l_components      = l_doc->create_simple_element( name = ‘Components’ parent = l_ui ). “#EC NOTEXT
  l_maincontainer    = l_doc->create_simple_element( name = ‘MainContainer’ parent = l_components ).
  l_workarea           = l_doc->create_simple_element( name = ‘WorkArea’ parent = l_maincontainer ).

Set the graph properties like type, version, layout type and the size of the grid.

* Use Buying Center graph properties. Set the graph direction as top down approach.

   l_graph = l_doc->create_simple_element( name = ‘Graph’ parent = l_root ). “#EC NOTEXT
   rc = l_graph->set_attribute( name = ‘type’ value = ‘BC2Graph’ ).
   rc = l_graph->set_attribute( name = ‘version’ value = ‘1.0’ ).
   l_direction = l_doc->create_simple_element( name = ‘direction’ parent = l_graph value = ‘TOP_BOTTOM’ ).

* Set the layout properties
  l_layouts = l_doc->create_simple_element( name = ‘layouts’ parent = l_graph ). “#EC NOTEXT
  rc = l_layouts->set_attribute( name = ‘onLoad’ value = ‘HIERARCHIC’ ).
  l_view = l_doc->create_simple_element( name = ‘view’ parent = l_graph ). “#EC NOTEXT

* Set the size and scale of the grid
  rc = l_view->set_attribute( name = ‘coordinates’ value = ‘GRID’ ).
  l_element = l_doc->create_simple_element( name = ‘grid’ value = ‘170,540’ parent = l_view ). “#EC NOTEXT
  l_element = l_doc->create_simple_element( name = ‘scale’ value = ‘80%’ parent = l_view ). “#EC NOTEXT

* Set the standard theme for the graph
  l_application = l_doc->create_simple_element( name = ‘application’ parent = l_graph ). “#EC NOTEXT

  l_element = l_doc->create_simple_element( name = ‘theme’ parent = l_application ). “#EC NOTEXT
  rc = l_element->set_attribute( name = ‘type’ value = ‘Standard’ ). “#EC NOTEXT

Now, coming to the content section. Create an element “Relations” and define the list of relationships that should be displayed in the graph.

For example, the relation “is Manager of” is defined as below,  

   l_relations = l_doc->create_simple_element( name = ‘relations’ parent = l_application ). “#EC NOTEXT

* Define all relationships in similar way

    l_element = l_doc->create_simple_element( name = ‘relation’ parent = l_relations ). “#EC NOTEXT
    l_value = ‘ZGD001’.
    rc = l_element->set_attribute( name = ‘id’ value = l_value ).
    l_value = ‘is Manager of’
    rc = l_element->set_attribute( name = ‘name’ value = l_value ).

Create the list of contacts to be displayed on graph as nodes.

For each node define the sockets and plugs and assign the contacts first/last name to a label.

LOOP AT lt_contacts INTO ls_contacts.
    l_node = l_doc->create_simple_element( name = ‘node’ parent = l_graph ).
    l_value = ls_contacts-partner.
* Assign a Node id
    rc = l_node->set_attribute( name = ‘id’ value = l_value ).
    rc = l_node->set_attribute( name = ‘type’ value = ‘BC2Node.Contact’ ).

* Create a socket for every added node during node creation
    l_socks = l_doc->create_simple_element( name = ‘sockets’ parent = l_node ).
    rc = l_socks->set_attribute( name = ‘min’ value = ‘1’ ).
    rc = l_socks->set_attribute( name = ‘position’ value = ‘NORTH’ ).
    rc = l_socks->set_attribute( name = ‘draw’ value = ‘FALSE’ ).

    CONCATENATE ls_contacts-name_first ls_contacts-name_last INTO l_value SEPARATED BY space.
    l_label0 = l_doc->create_simple_element( name = ‘label’ value = l_value parent =  l_node ).
    rc = l_label0->set_attribute( name = ‘index’ value = ‘0’ ).
  ENDLOOP.

Now, the created nodes must be linked to each other based on their relationship. A relationship is defined as an edge.

For example, here we link 2 contacts with relationship “is Manager of”.

 

l_edge = l_doc->create_simple_element( name = ‘edge’ parent = l_graph ).

* Assign a unique id to the edge.
    CONCATENATE ls_relation-partner1 ls_relation-partner2 INTO l_value.
    rc = l_edge->set_attribute( name = ‘id’ value = l_value ).

    l_element = l_doc->create_simple_element( name = ‘property’  parent = l_edge ). “#EC NOTEXT
    rc = l_element->set_attribute( name = ‘name’ value = ‘relation’ ).

* Assign the relationship id

    l_value = ‘ZGD001’.

    rc = l_element->set_attribute( name = ‘value’ value = l_value ).

* Use the edge type from Buying Center
    rc = l_edge->set_attribute( name = ‘type’ value = ‘BCLink’ ).

* Set the source and target nodes of a relationship link
* Pass the source and traget node id’s. Node id is the id of the contact nodes created.
    l_from = l_doc->create_simple_element( name = ‘from’ parent = l_edge ).
    rc = l_from->set_attribute( name = ‘node’ value = <–Node ID–> ). 
    l_to = l_doc->create_simple_element( name = ‘to parent = l_edge ).
    rc = l_to->set_attribute( name = ‘node’ value = <–Node ID–> ).

* Set the look & feel propertiess of the relationship link
    l_color = l_doc->create_simple_element( name = ‘color’ parent = l_edge ).
    l_rgb = l_doc->create_simple_element( name = ‘rgb’ value = ” parent = l_color ).

* Set the label  to be displayed on the relationship link
    l_label_l = l_doc->create_simple_element( name = ‘label’ parent = l_edge ).
    l_value = ‘is Manager of’.
    l_text = l_doc->create_simple_element( name = ‘text’ value = l_value parent = l_label_l ).

Create an xml renderer and render the document into output-stream.  

  l_streamfactory = l_ixml->create_stream_factory( ).

  l_ostream = l_streamfactory->create_ostream_xstring( xdata ).

* set an document encoding to UTF-8

  l_encoding = l_ixml->create_encoding( character_set = ‘utf-8’  byte_order = 0 ).

  l_success  = l_ostream->set_encoding( encoding = l_encoding ).

* create a xml renderer

  l_renderer = l_ixml->create_renderer( document = l_doc ostream  = l_ostream ).

Now, Graph data is generetad as xml and stred in variable xdata. Get bsp runtime instance and build an url to where the XML data is stored. Generate a filename to represent the xml data. 

  lv_bsp_runtime ?= cl_bsp_runtime=>get_runtime_instance( ).
  IF lv_bsp_runtime IS BOUND.
    lv_server ?= lv_bsp_runtime->server.
  ENDIF.

CALL METHOD cl_bsp_runtime=>construct_bsp_url

    EXPORTING

      in_application_ns = ‘sap’                   

      in_application      = ‘BP_DATA’                                 

      in_protocol          = ‘HTTP’ or ‘HTTPS’  —> depends on the client protocol

    IMPORTING

      out_abs_url         = lv_url.

CONCATENATE lv_url ‘/’ <filename>  ‘.xml’ into lv_url.

The final step is to create a http response handler and stroe the XML data in Internet Communication Framework.

DATA: lr_http_response       TYPE REF TO cl_http_response.

* Store XML on ICM
  CREATE OBJECT lr_http_response
    EXPORTING
      add_c_msg = 1.

  lr_http_response->if_http_response~server_cache_expire_rel( expires_rel = 3600 ).
  lr_http_response->if_http_response~set_status( code = 200 reason = ‘OK’ ).
  lr_http_response->if_http_entity~set_header_field(
                                     name = ‘Content-Type’ value = ‘text/html; charset=utf-8’ ). “#EC NOTEXT
* Pass the xml data
  lr_http_response->if_http_entity~set_data( data = xdata ).
* Pass the url and the http response handler
  CALL METHOD cl_http_server=>server_cache_upload( url = lv_url
                                                                                 response = lr_http_response ).

In simple steps, the JNet graph layout and the relationships data are generated as an xml data using iXML library. Assign the XML data as a http response to a specific url. Load the url using graphics:net extension in view layout page.

<graphics:net width                               = “800”

                height                                   = “600”

                net_applet_name                = “graph_chart”

                use_local_mime_repository = “false”

                trace_level                         = “2”

                use_gfiles                          = “true”

                align                                  = “left”

                look_and_feel_jars             = “JNetAppBc2.jar”

                initial_data                        = “<%= lv_url %>” />

Regards,

Arun

ArunKumar Balakrishnan

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Mar tin

    Hi Arun,

    great post. How can I contact you? I have some errors and questions about the coding.

    Otherwise can you send me more information about the coding?

    Kind regards

    Martin

    (0) 
      1. Mar tin

        First, in this line no output stream were created. The variable xdata is always empty.

        DATA: l_streamfactory TYPE REF TO if_ixml_stream_factory.
        DATA: l_ostream TYPE REF TO if_ixml_ostream.
        l_streamfactory = l_ixml->create_stream_factory( ).
        l_ostream = l_streamfactory->create_ostream_xstring( xdata ).

        How do I implement this correct?

        My second question is, where the xml file will be stored. The Java Console write the error “Unable to open the resource “http://path/test.xml“. Is the xml file created automatically or will some permissions needed?

        Kind regards

        Martin

        (0) 
        1. ArunKumar Balakrishnan Post author

          The output stream will be generated only if l_ixml is instantiated and the xml document is created properly. It should be as,

          1.  l_ixml           = cl_ixml=>create( ). 

          2.  l_doc           = l_ixml->create_document( ).

          3.  <—create elements—>

          4.  l_streamfactory = l_ixml->create_stream_factory( ).

          5.  stream = l_streamfactory->create_ostream_xstring( xdata ).

          I’m not sure about the security settings but if the xml file contains error’s then the Java console cannot read the xml file. A http handler response is created and the xml data is stored in the server cache.

          Regards,

          Arun

          (0) 
  2. Swapnil Chavan

    Hi Arun, I am new to CRM UI Development . Could please give detailes steps how I can enhance or build this feature . Which component have you changed.?

    (0) 
  3. Sanket S Patil

    Hi Arun,

    Thanks for this blog.

    I am having some issue with coding, I am not able to get graphs on Web UI.

    Please explain that how I can get value through xdata.

    While dubbing I am able to get Business Partners in ls_contacts but I am stuck in below code.

    send me more information about this code.

    *****************************************************************************************************************************

    *      *Create an xml renderer and render the document into output-stream.

    l_streamfactory = l_ixml->create_stream_factory( ).

    l_ostream = l_streamfactory->create_ostream_xstring( xdata ).

    * set an document encoding to UTF-8
    *
    *  l_encoding = l_ixml->create_encoding( character_set = ‘utf-8’  byte_order = 0 ).
    *
    *  l_success  = l_ostream->set_encoding( encoding = l_encoding ).
    *
    ** create a xml renderer
    *
    *  l_renderer = l_ixml->create_renderer( document = l_doc ostream  = l_ostream ).

    *****************************************************************************************************************************

    (0) 

Leave a Reply