JSON viewer for APEX in under 5 minutes

The need for JSON Viewer

With JSON being the most popular format for representing data and exchanging information over the web, it is very important that we can easily read such documents and easily find information.

Almost daily I am consuming REST services in my APEX applications, and the responses are in JSON format. It is easy to just display the result in a Static Content Region or a Display Only item if I need to. However, these are not very flexible, as sometimes the text is just too much to read and visualize. An essential functionality that I need is the ability to Expand/Collapse JSON nodes and have some colouring on the different elements so I can easily read it.

So I did some research and found a library that does just that. Within few minutes I had a working prototype and after few more - a fully functional JSON Viewer region to help me visualize JSON Documents. If you follow the steps below, I guarantee you will have a working component in just few minutes.

Creating the viewer

To help me create my JSON Viewer in APEX, I used the following library, which is built on top of one of the most popular browser extensions - https://jsonview.com/:

• In your APEX Page, add the following JS and CSS URLs to the JavaScript and CSS sections respectively:
  JS: https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js
  CSS: https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css

  

• Now you need a Region with some JSON text in it. It could be a Static Content one, a Dynamic Content Region, whatever you need to display your JSON value in. What’s important is that you wrap your JSON text around with some HTML for easy selection later, I have chosen the <pre> tag with a CSS class:

    <pre class="my_json_item">#MY_JSON_TEXT#</pre>
  

  Here is an example of a Dynamic Region (with a Static ID json_result), returning the some JSON result that I have stored in the database:

  

• Next, create a Dynamic Action that will allow the JS library to format the JSON output, adding features like expand and collapse nodes.

  

  For this Dynamic Action, create a True action of type Execute JavaScript Code:

    var json = $('.my_json_item').text();
  
    $(function() {
      $(".my_json_item").JSONView(json, { collapsed: true });
    });
  

  

Adding Collapse and Expand feature

Now that we have the Viewer, there is some bonus features that can be implemented. Looking at the JSON Viewer’s initialization code, there is a property, called collapsed, which can be true or false. We can set that using JavaScript and a button on our page.

Now let’s create separate buttons for Expanding and Collapsing:

Once the two buttons are in place, time to create two Dynamic Actions. They will both Execute JavaScript Code on Button Click event.

Now set a new True Action of type Execute JavaScript Code for each of them with the following code (note the apex.region("json_result").refresh() part - this will refresh your Dynamic Region with a Static ID json_result):

// Expand All JSON nodes
function expand_all() {
   var json = $('.my_json_item').text();

   $(function() {
       $(".my_json_item").JSONView(json, { collapsed: false });
   }); 
 }

 ( apex.region("json_result").refresh() )
     .then(() => ( expand_all() )
 )

// Collapse All JSON nodes
function collapse_all() {
   var json = $('.my_json_item').text();

   $(function() {
       $(".my_json_item").JSONView(json, { collapsed: true });
   }); 
 }

 ( apex.region("json_result").refresh() )
     .then(() => ( collapse_all() )
 )

Additional Styling

You can additionally modify how your JSON Viewer displays the results by changing a bit the CSS classes it uses. Here is an example of styling the number, string, boolean and null values:

.jsonview .bool, .jsonview .num {
    color: var(--ut-palette-success);
}

.jsonview .string {
    color: var(--ut-palette-info);
}

.jsonview .null {
    color: var(--ut-palette-danger);
}

.jsonview .collapser {
    color: var(--ut-palette-primary-alt);
}

Demo

View the APEX Demo in action here:
https://apex.oracle.com/pls/apex/f?p=100771:44

Further development

Add a comment below if you liked this article. Most importantly - if you find such component useful. If that’s the case, my next step will be to create an APEX Template Component that can be easily installed!