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 DEFINITIONLOAD.
* 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 wayl_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 SEPARATEDBY 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