Search for a command to run...
See how you can quickly build your own JSON viewer in Oracle APEX
Creating apps built with ❤️ using Oracle APEX. PL/SQL dev. Exploring the AI and ML world. Keen on front-end, visual arts and new technologies. Love travel, sports, photography.
No comments yet. Be the first to comment.
Impressions from APEX Alpe Adria 2026
The Use Case Oracle APEX has a special template for Dialog Pages, called Drawer. This template is also available for any Region on you Page (this time called Inline Drawer). 💡 A Drawer is an overlay
The Use case (and the issue) What you see on this screenshot is a pretty common requirement in an APEX application - A form, where you have some text item or dropdown menu, followed by a button or som
The power of Claude Code - offline, free, secure
Using a REST Media Resource as an image source
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.
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 });
});
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.
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:
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() )
)
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);
}
—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.View the APEX Demo in action here:
https://apex.oracle.com/pls/apex/f?p=100771:44
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!