Securely Open an APEX Modal from JavaScript

Table of contents

Introduction
This post explains how to open an Oracle APEX modal page and securely pass unsaved form values as parameters, before they’re committed to session state. This technique is essential when users enter data into fields and trigger a modal window without submitting the page, ensuring values are passed safely and reliably.
Use Cases
While entering an address, open a modal to validate the address.
When entering a new customer or supplier, open a modal to check for duplicates.
Provide additional information about a selection made in a list of values.
Example
In this example, we have created an APEX page that enables users to add Oracle e-Business Suite Suppliers. The user should be able to enter a supplier name and then click a button to use fuzzy search to find potential duplicate suppliers. The user should not have to save the page before performing the duplicate check.
When the user clicks the Duplicate Supplier Check button, the modal below should display potential duplicate suppliers.
We must pass the supplier name when opening the fuzzy match modal page to achieve this.
Button
Let’s start by creating the Duplicate Supplier Check button and adding a dynamic called Check for Duplicate Suppliers:
Check Supplier Name Entered
In the first step of the dynamic action, we are going to run some JavaScript code to make sure the user entered a value in the Supplier field:
apex.message.clearErrors();
if ( apex.item( "P210_SUPPLIER_NAME" ).isEmpty() ) {
apex.message.showErrors( [
{ type: "error",
location: ["inline"],
pageItem: "P210_SUPPLIER_NAME",
message: "Please enter an Supplier Name.",
unsafe: false
}
]);
apex.da.cancel();
};
Generate URL for Modal
In the second step, we will run Server-side Code to generate the URL for the modal:
BEGIN
apex_debug.info ('Supplier [%s]', UPPER(:P210_SUPPLIER_NAME));
:P210_OPEN_URL :=
apex_page.get_url
(p_page => 225,
p_items => 'P225_SEARCH_VENDOR_NAME',
p_clear_cache => 225,
p_values => UPPER(:P210_SUPPLIER_NAME));
END;
P210_SUPPLIER_NAME
in the Items to Submit field, and return the generated URL to a page item P210_OPEN_URL
.P210_OPEN_URL
is a hidden item with Value Protected set to Off. In this instance, setting protection off is safe because anyone manually manipulating this page item in the browser tools couldn’t generate the correct checksums.This is how P210_OPEN_URL
is setup:
Open Modal
In the final step, we open the modal using the apex.navigation.redirect
API:
Conclusion
Securely opening modal pages in Oracle APEX with unsaved user input is a powerful technique for building responsive, user-friendly applications without compromising session security. By combining client-side validation, server-side URL generation, and modal dialog APIs like apex.navigation.redirect
, you ensure that parameters are passed with proper checksum validation, even before the page is submitted.
This pattern is especially useful in workflows that rely on mid-form lookups, validations, or auxiliary actions, such as duplicate checks. Once mastered, it becomes an essential part of any APEX developer’s toolkit for building dynamic, modern UIs.
More on Fuzzy Search
Subscribe to my newsletter
Read articles from Jon Dixon directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Jon Dixon
Jon Dixon
Hi, thanks for stopping by! I am focused on designing and building innovative solutions using the Oracle Database, Oracle APEX, and Oracle REST Data Services (ORDS). I hope you enjoy my blog.