Press "Enter" to skip to content

Oracle Apex: Show or Hide DOM Elements Using JavaScript

In Oracle Apex, use $x_Show() and $x_Hide() JavaScript API methods to show or hide DOM elements.

A DOM element can be a region, button, page item, etc. But except page item, other elements such as regions and buttons must have a static id specified because $x_Show() and $x_Hide() uses the DOM node as an argument. Below is the syntax for both the methods:

$x_Show(pNd); //  Shows the specified DOM element
$x_Hide(pNd); // Hides the specified DOM element

In the following example, it will demonstrate how to show or hide a button in Oracle Apex using the JavaScript:

Show or Hide Button in Oracle Apex using JavaScript

On your page, click on the button and specify the static id for the button as shown in the image below:

Specify Static id for a button in Oracle Apex.

NOTE: A static id for an element should be unique, meaning you can not assign the same static id to another element on the same page.

You can now hide this button using the following JavaScript command:

$x_Hide("btnDel");

To show the button back:

$x_Show("btnDel");

Suppose you want to hide the button if the primary key field is null. Check the following example for it:

if (apex.item("P2_EMPNO").isEmpty()) {
   $x_Hide("btnDel");
} else {
   $x_Show("btnDel");
}

Show or Hide Region in Oracle Apex using JavaScript

Specify the static id for the region and show or hide, as shown in the below example:

$x_Hide("rgnEmp"); // it will hide the region having static id rgnEmp

To show it back:

$x_Show("rgnEmp"); // it will show the region having static id rgnEmp

Show or Hide a Page Item in Oracle Apex using JavaScript

For a page item such as text field, numeric item, and select list, you don’t need to specify the static id for them.

Use their names in place of static id to show or hide them. In the below example, it will hide the page item P2_ENAME:

$x_Hide("P2_ENAME");

Reference: Oracle Apex API reference

Related tutorial:

Have you found the answer to your question? If not, you can discuss it with me in the comments section below or join my Q&A community OrclQA.com for developers and ask your question. It is FREE.

Vinish Kapoor

Follow

Hi, I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me; it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub, and get notifications for new posts.

guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
George
George
6 months ago
$x_Show and $x_Show are placed in a DA?
Joseph
Joseph
Reply to  Vinish Kapoor
3 months ago

Thanks, it worked for me.

Marion
Marion
5 months ago

Thanks for this; working with an IR. I have the buttons and an extraneous region hidden. How can I hide the Interactive Report Search Bar?

douglas
douglas
9 hours ago

is it posible with a interactive report a especific column to hide when the value is empty?