How to create a JSON Viewer in Neptune DXP (SAP Edition)

The JSON Viewer is a tool that helps the user to visualize and understand the JSON data in a hierarchical tree-like structure and quickly identify errors.

There are various online tools and browser extensions that offer this functionality but I tried to build it in Neptune DXP (SAP Edition).

Today I want to share how to create a JSON Viewer using the Monaco Editor and the Network Graph UI5 element.

• Create a new application
• If you are using the App Designer from the SAP GUI make sure to select the sap.suite option in the App Library settings
• Set the SAP Horizon Dark theme
• Open the Header section and paste the following code to include the monaco.js library in our application

<script src="/neptune/server/js/monaco/bundle/monaco.js"></script>

• The final result of the App Designer structure will be like that

• Create the following elements: Shell > App > Page
• Select the Shell element and set the appWidthLimited property to false
• In Resources create a new folder with inside two JavaScript elements (initialize and buildGraphData)
• Add a new sap.ui.layout.Splitter element inside the Page
• In the Splitter element add the sap.ui.core.HTML and sap.suite.ui.commons.networkgraph.Graph elements
• Select the HTMLObject element and insert the following code in the content property

<div id='jsonEditor' style='height: 100%'></div>

• Inside the HTMLObject add the sap.ui.layout.SplitterLayoutData object with the size property equal to 25%
• Select the Graph element, set the orientation property equal to TopBottom and renderType equal to Svg, assign then the Model Source as Generic Object

• Inside the Graph element add the sap.suite.ui.commons.networkgraph.Node and sap.suite.ui.commons.networkgraph.Line elements
• Select the Node object, assign the Model Path equal to /NODES and bind the following properties: height, icon, key, shape, status, title and width. Make sure to assign the maxWidth equal to 1000 and the styleClass equal to nodeStyle

• Add a new sap.suite.ui.commons.networkgraph.ElementAttribute and sap.suite.ui.commons.networkgraph.NodeImage elements inside the Node object
• The ElementAttribute element needs to have the Model Path equal to ATTRIBUTES and the following properties binded: label, value

• Select the NodeImage element, bind the src property and assign the height and width properties equal to 100

• In the Line object use the Model Path /LINES, bind the from and to properties and assign the arrowOrientation property equal to None

• In the buildGraphData element use the following JavaScript code buildGraphData.js - GitHub
• We can create the Monaco Editor and call the function in the initialize script initialize.js - GitHub
• Finally let’s add few lines of CSS in the Stylesheet section style.css - GitHub
• You can use this JSON to test the application example.json - GitHub

In the initialize script when the HTMLObject is rendered the Monaco Editor is created.

When the user enters a JSON in the editor the onDidChangeModelContent method is executed in order to build the graph model.

In the buildGraphData script a recursive function is used to navigate inside all JSON objects and add all required nodes and lines.

Finally the model is assigned to the graph element.

Here a GIF (it may require some time to load):

• The JavaScript / CSS code can be improved and readapted for specific scenarios
• Additional features like the export of the graph can be added

Hope this helps

Happy coding!