How to Open Oracle APEX Modal Dialog and Set Page Item Value Dynamically using JavaScript & SQL

Overview

In this post, you'll learn how to dynamically navigate to a Modal Dialog page in Oracle APEX and pass values to specific page items using APEX_UTIL.PREPARE_URL and JavaScript. This builds upon the drag-and-drop ticketing example explained here.

How to Open Oracle APEX Modal Dialog and Set Page Item Value Dynamically using JavaScript & SQL

While this blog post explains the concepts and code step by step, the YouTube video gives you a complete visual walkthrough. You'll see how each method works in a real APEX application, how to test it live, and understand the logic better with practical examples. It's perfect if you prefer learning by seeing it in action!

Step 1: Create the Modal Dialog Page

Start by creating a Modal Dialog Form with the following details:

• Name: Update Ticket Details
• Title: Update Ticket Details
• Page Mode: Modal Dialog
• Dialog Template: Drawer
• Template Options: Use Template Defaults, End

Form Source: TMS_TASKS (refer to the DDL in the previous post)

Step 2: Generate URL for Modal Dialog

There are two methods for generating the dialog URL:

Option 1: Using APEX_PAGE.GET_URL

Use the syntax below to generate a clean, readable URL:

APEX_PAGE.GET_URL (
    p_application => 17222,
    p_page        => 4,
    p_items       => 'P4_ID',
    p_values      => '2'
)

This method is officially recommended by Oracle for readability.

Option 2: Using APEX_UTIL.PREPARE_URL

Preferred in this implementation for enhanced control:

CREATE OR REPLACE FUNCTION prepareUrl (ticketId IN number)
RETURN varchar2 IS 
  l_url VARCHAR2(2000);
BEGIN
  l_url := APEX_UTIL.PREPARE_URL(
    p_url => 'f?p='|| v('APP_ID') || ':4:'|| v('APP_SESSION') || '::NO::P4_ID:' || ticketId,
    p_checksum_type => 'SESSION',
    p_triggering_element => '#ticket'||ticketId
  );
  RETURN l_url;
END;
/

Step 3: Create Dynamic Content with URLs

Generate a JSON array with ticket IDs and their corresponding dialog URLs using a PL/SQL dynamic region:

DECLARE
  l_json_data clob;
BEGIN
  SELECT '[' || LISTAGG(JSON_OBJECT('id' VALUE 'ticket'||id, 'url' VALUE prepareUrl(id)), ',') 
         WITHIN GROUP (ORDER BY id) || ']'
    INTO l_json_data
    FROM tms_tasks;

  RETURN '<div id="linkData">' || apex_escape.html(l_json_data) || '</div>';
END;

Add the below style attribute to hide the region:

style="display:none"

Step 4: JavaScript to Open Modal on Click

Use the following JavaScript code to bind modal dialog behavior to elements based on ticket ID:

const insertClickLinks = () => {
  let linkData = document.getElementById('linkData').innerText;
  let jsonData = JSON.parse(linkData);
  let ticketCount = jsonData.length;

  for (let i = 0; i < ticketCount; i++) {
    let url = jsonData[i]["url"];

    document.getElementById(jsonData[i]["id"]).addEventListener('click', () => {
      apex.navigation.dialog(url, {
        title: "Update Ticket Details",
        dialog: "drawer",
        height: "auto",
        width: "720",
        maxWidth: "960"
      });
    });
  }
};

Call this function after all dynamic content is loaded:

Promise.all([createSwimlane()])
  .then(() => {
    return populateTickets();
  })
  .then(() => {
    return insertClickLinks();
  })
  .catch((error) => {
    console.error(error);
  });

Conclusion

Using this technique, you can seamlessly trigger Oracle APEX Modal Dialogs and pass values to page items dynamically using PL/SQL and JavaScript. This is especially useful for building interactive UIs like Kanban boards, ticket systems, or task managers.

🔗 Additional Resources

• Official Oracle APEX GET_URL Function Documentation
• Official Oracle APEX PREPARE_URL Function Documentation