Quick info on how to create a relationship graph using a java script library, html and business server pages. Hope you like it.
Requirements:
Java script library joint.js
Stylesheet joint.css
Both required files can be found at JointJS download.
You can find more information about the joint.js library at JointJS - the HTML 5 JavaScript diagramming library.
I found this an easy to use library for creating a relationship graph that does not have the constraints of a tree or organizational chart.
Attached is example.html a fully functional webpage that show the relationship graph, data for the graph has been included in the script in a JSON format. Simply open the file in a browser to see the result. More work needs to be done to improve the algorithm that is responsible for the placement of the nodes (elements).
Page has 2 input data sources 1 for the nodes (elements) and 1 for the links between the nodes. In the example.html both data sources are supplied with data in the java script section. When used as a business server page this will be replaced with data that is retrieved from SAP, more on this in the paragraph "Business server page".
Input data
JSON format. 2 input data sources 1 for the nodes (elements) and 1 for the links between the nodes.
Nodes
3 fields:
a) ZZ_KEY this is the internal unique key
b) ZZ_ID this is intended for the id or key the node represents
c) ZZ_NAME name displayed in the node (element)
// sample data
var nodes = [{"ZZ_KEY":0,"ZZ_ID":"ID00","ZZ_NAME":"Name 0"},
{"ZZ_KEY":1,"ZZ_ID":"ID01","ZZ_NAME":"Name 1"},
{"ZZ_KEY":2,"ZZ_ID":"ID02","ZZ_NAME":"Name 2"},
{"ZZ_KEY":3,"ZZ_ID":"ID03","ZZ_NAME":"Name 3"}];
Links
3 fields:
a) ZZ_PARENT parent key which must be known in "nodes"
b) ZZ_CHILD child key which must be known in "nodes"
c) ZZ_DESCR text displayed on the line between the nodes (elements)
// sample data
var links = [{"ZZ_PARENT":0,"ZZ_CHILD":1,"ZZ_DESCR":"50%"},
{"ZZ_PARENT":1,"ZZ_CHILD":2,"ZZ_DESCR":"2%"},
{"ZZ_PARENT":0,"ZZ_CHILD":2,"ZZ_DESCR":"5%"},
{"ZZ_PARENT":2,"ZZ_CHILD":3,"ZZ_DESCR":"49%"}];
Business server page
You can retrieve the relevant data in the "initialization" event of Business server page. In the example.html page you will need to comment out the sample data and replace it with:
// data from SAP backend
var nodes = <%= nodes_json %>;
// data from SAP backend
var links = <%= links_json %>;
Between "<%=" and "%>" is the name of the variable declared in SAP that is a string containing the data in JSON format.
Create BSP example application
- Create a BSP application and add a BSP page with Flow logic as shown in the picture below.
- Copy the content of example.html to your BSP page.
- Add your code for retrieving the data (and creating the JSON string) to layout event "OnInitialization".
- Add 2 page attributes these are the 2 strings that will contain the JSON data (picture below).
- Convert your data to JSON.
I've created 2 structures 1 for the nodes and 1 for the links and used them for 2 internal tables which will later be converted to JSON once they contain all the data.
* declarations
DATA: writer TYPE REF TO cl_sxml_string_writer.
DATA: json TYPE xstring.
DATA: tb_nodes TYPE STANDARD TABLE OF zvas_rlsh_graph_nodes.
DATA: tb_links TYPE STANDARD TABLE OF zvas_rlsh_graph_links.
[get your data and copy it to the internal table tb_nodes and tb_links]
* ABAP to JSON
* nodes
writer = cl_sxml_string_writer=>create( type = if_sxml=>co_xt_json ).
CALL TRANSFORMATION id SOURCE nodes_json = tb_nodes
RESULT XML writer.
json = writer->get_output( ).
* convert xstring to string
nodes_json = cl_abap_codepage=>convert_from( json ).
* remove last character and start id e.g. "{"nodes_json":"
SHIFT nodes_json BY 1 PLACES RIGHT CIRCULAR.
SHIFT nodes_json BY 15 PLACES LEFT.
* links
CLEAR: writer, json.
writer = cl_sxml_string_writer=>create( type = if_sxml=>co_xt_json ).
*CALL TRANSFORMATION id SOURCE table = tb_nodes
CALL TRANSFORMATION id SOURCE links_json = tb_links
RESULT XML writer.
json = writer->get_output( ).
* convert xstring to string
links_json = cl_abap_codepage=>convert_from( json ).
* remove last character and start id e.g. "{"nodes_json":"
SHIFT links_json BY 1 PLACES RIGHT CIRCULAR.
SHIFT links_json BY 15 PLACES LEFT.
- Populate the JSON variables
Replace the sample data with the JSON string created in the "OnInitialization" event.
// sample data
//var nodes = [{"ZZ_KEY":0,"ZZ_ID":"ID00","ZZ_NAME":"Name 0"},
// {"ZZ_KEY":1,"ZZ_ID":"ID01","ZZ_NAME":"Name 1"},
// {"ZZ_KEY":2,"ZZ_ID":"ID02","ZZ_NAME":"Name 2"},
// {"ZZ_KEY":3,"ZZ_ID":"ID03","ZZ_NAME":"Name 3"}];
// data from SAP backend
var nodes = <%= nodes_json %>;
// sample data
//var links = [{"ZZ_PARENT":0,"ZZ_CHILD":1,"ZZ_DESCR":"50%"},
// {"ZZ_PARENT":1,"ZZ_CHILD":2,"ZZ_DESCR":"2%"},
// {"ZZ_PARENT":0,"ZZ_CHILD":2,"ZZ_DESCR":"5%"},
// {"ZZ_PARENT":2,"ZZ_CHILD":3,"ZZ_DESCR":"49%"}];
// data from SAP backend
var links = <%= links_json %>;
- Activate the BSP application
Press the test button and see what happens. Browser should start showing a graph based on your data.
If not start a debug session either in SAP or directly in your browser.
You comments are welcome.
Cheers Dennis
- SAP Managed Tags:
