# 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/](https://jsonview.com/): %[https://github.com/yesmeck/jquery-jsonview?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library] * 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](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](https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729072086185/bb985aba-db98-44b8-a42d-e20cc99cfa53.png align="center") * 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 `
` tag with a CSS class:
    
    ```xml
    
#MY_JSON_TEXT#

    ```
    
    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:
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729074067678/ac5d0810-db13-4021-846d-300146fc3131.png align="center")
    
* Next, create a `Dynamic Action` that will allow the JS library to format the JSON output, adding features like expand and collapse nodes.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729076229843/beb0331e-d777-4f81-bf24-4937a1cbeb6b.png align="center")
    
    For this `Dynamic Action`, create a `True` action of type `Execute JavaScript Code`:
    
    ```javascript
    var json = $('.my_json_item').text();
    
    $(function() {
      $(".my_json_item").JSONView(json, { collapsed: true });
    });
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729076130163/879fa53f-794f-4cb8-aaff-18b1396d1dd5.png align="center")
    

## 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.




💡


To implement this feature and refresh the JSON Viewer dynamically, without reloading the whole page, we need to have it in a Dynamic Content region. This is due to the fact that Dynamic Content regions support the refresh() JS method I am using below: apex.region("json_result").refresh().




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

![Expand All button](https://cdn.hashnode.com/res/hashnode/image/upload/v1729083026093/0faa7855-d4c5-483e-aad1-7e186a018ceb.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729084431753/f7c3c236-8332-449e-911a-d20870fd3586.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729084990511/0eb7c106-5418-4325-a9d2-a6b60e08356c.png align="center")

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**):

```javascript
// 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() )
 )
```

```javascript
// 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:

```css
.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);
}
```




💡


The example above is taking advantage of the Universal Theme CSS variables like —ut-palette-success, —ut-palette-info, etc. Note that APEX introduced these CSS variables in 21.2, so they will not work if you have an older version of the Universal Theme. You need to either refresh the Universal Theme to the latest version or use hard coded colour values like #cecece, green, etc., instead of the Universal Theme CSS variables.




## Demo

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729088769295/cb8f1ea0-64bc-4d00-9953-cd86cf501839.png align="center")

## 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!