# Securely Open an APEX Modal from  JavaScript

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

![Screenshot showing APEX Page where users can enter a new supplier and check for duplicates](https://cdn.hashnode.com/res/hashnode/image/upload/v1739034577921/013e9e24-fde4-4ad0-a3a2-b3ff49845758.png align="center")

When the user clicks the **Duplicate Supplier Check** button, the modal below should display potential duplicate suppliers.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739034700133/a665cd64-c3bb-4b14-81a2-5762b9543172.png align="center")

We must pass the supplier name when opening the fuzzy match modal page to achieve this.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">The Fuzzy search page uses the function UTL_MATCH.JARO_WINKLER_SIMILARITY to identify likely duplicates. Check out <a target="_self" rel="noopener noreferrer nofollow" href="https://sandra-suarez.com/duplicate-records-with-fuzzy-match-algorithm" style="pointer-events: none">this post</a> from Sandra Suarez if you want to learn more about using Fuzzy Search to eliminate duplicates in your ERP.</div>
</div>

## Button

Let’s start by creating the **Duplicate Supplier Check** button and adding a dynamic called **Check for Duplicate Suppliers**:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739035512259/8cf6ec34-0cc4-43bd-80c4-50f57f67bb27.png align="center")

### 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 Dynamic Action Step 1](https://cdn.hashnode.com/res/hashnode/image/upload/v1739035580673/596a22e7-8552-4b66-8a22-180b820a4ec9.png align="center")

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

![APEX Dynamic Action Step 2](https://cdn.hashnode.com/res/hashnode/image/upload/v1739035403881/29384952-3111-4ec6-9b33-85c3ad16dd1f.png align="center")

```sql
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;
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">In this use case, the modal page we want to open is page 225. This page has <strong>Page Access Protection</strong> set to <strong>Arguments Must Have Checksum</strong>. This means we must generate the URL on the server side to ensure the correct checksums are generated for the parameters.</div>
</div>

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Also, note that we must pass in the supplier's name <code>P210_SUPPLIER_NAME</code> in the Items to Submit field, and return the generated URL to a page item <code>P210_OPEN_URL</code>.</div>
</div>

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Page item <code>P210_OPEN_URL</code> is a hidden item with <strong>Value Protected</strong> set to <strong>Off</strong>. 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.</div>
</div>

This is how `P210_OPEN_URL` is setup:

![APEX Page Item Used to Store the URL](https://cdn.hashnode.com/res/hashnode/image/upload/v1739035981984/54948461-c6d4-4f27-acd3-89289007fb99.png align="center")

### Open Modal

In the final step, we open the modal using the `apex.navigation.redirect` API:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739036209196/48fce2a2-58ad-4b4a-9f4e-0c2fbc455160.png align="center")

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

* Check out [this post](https://sandra-suarez.com/duplicate-records-with-fuzzy-match-algorithm) from @[sssuarez](@sssuarez) if you want to learn more about Fuzzy Search in the Oracle database.