Graphical representation of organizational relationships in CRM Web UI

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:

Organizational relationships in a hierarchical graphical representation:

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