Quickly Launch Oracle Apex Modals with JavaScript

Ever wondered if there was a quick function in Oracle Apex JavaScript library to allow you opening Modal Pages without worrying about the Checksum Page Protection on Modal Page and without writing a confusing JavaScript code in Dynamic Actions every time?

Well, I can’t add the function to Apex library but I could help you with a ready-made code which you could just copy and paste to open any modal page in your Apex applications with just a few lines of code.

As the phrase goes "Give a task to the laziest person; they'll find the quickest way to get it done." :) , my laziness helped me in writing the following code which I could just copy and paste whenever I need this functionality (before Oracle Apex Product Team decide to add this functionality to Apex library).

Create an Application Process with the following PL/SQL code and Process Point as Ajax Callback. You could name the process as - APP_GET_MODAL_PAGE_URL (recommended) or anything you like, but remember to mention it in the JavaScript function definition which you’ll find below.
As this Ajax Callback Process uses APEX_PAGE.GET_URL function from Apex PL/SQL API library, the returned URL contains the required checksum values too. So, if the target modal page has Page Access Protection as “Arguments Must Have Checksum”, you don’t need to worry about Page Checksum Violation Error.

    declare
    /* Create Application Process using this PLSQL code with Ajax Callback Point and name as - APP_GET_MODAL_PAGE_URL */
    l_url varchar2(4000 char);
    begin

    l_url:= APEX_PAGE.GET_URL (
        p_application        => regexp_replace(apex_application.g_x01,'\s',''),
        p_page               => regexp_replace(apex_application.g_x02,'\s',''),
        p_session            => apex_application.g_instance,
        p_request            => regexp_replace(apex_application.g_x03,'\s',''),
        p_debug              => regexp_replace(apex_application.g_x04,'\s',''),
        p_clear_cache        => regexp_replace(apex_application.g_x05,'\s',''),
        p_items              => regexp_replace(apex_application.g_x06,'\s',''),
        p_values             => regexp_replace(apex_application.g_x07,'\s',''),
        p_triggering_element => regexp_replace(apex_application.g_x08,'\s',''),
        p_plain_url          => TRUE /* p_plain_url must be TRUE for modal dialog urls */
    );

    htp.p('{"status":"success","url":"'||l_url||'"}');

    exception when others then 
        htp.p('{"status":"failure","error":"'||sqlerrm||'"}');
    end;

Add the following JavaScript function definition in Shared Components → Application Files or on the Page 0 in Page Load Dynamic Action to use it globally or you could put it locally on the desired pages. You know it better so I won’t tell you how to do it.

    function openApexModalDialog({
        pAjaxPlsqlProcessName = "APP_GET_MODAL_PAGE_URL", /* Apex Application Process Name */
        pAppId = apex.env.APP_ID,
        pAppPageId,
        pRequest = "",
        pDebug = "&DEBUG",
        pClearCache = "",
        pItemNamesCSV = "",
        pItemValuesCSV = "",
        pTriggeringElementSelector = "#" + $(this).prop("id"),
        pModalWidthPX = 900,
        pModalHeightPX = 600,
        pModalTitle = "Dialog"
    } = {}) {
        apex.server.process(pAjaxPlsqlProcessName, {
            x01: pAppId,
            x02: pAppPageId,
            x03: pRequest,
            x04: pDebug,
            x05: pClearCache,
            x06: pItemNamesCSV,
            x07: pItemValuesCSV,
            x08: pTriggeringElementSelector
        }, {
            success: function (data) {
                console.log(data);
                try {
                    if (data.status == "success") {
                        //console.log(data.url);
                        apex.navigation.dialog(
                            data.url, {
                            title: pModalTitle,
                            height: pModalHeightPX,
                            width: pModalWidthPX,
                            modal: true,
                            resizable: true
                        },
                            'a-Dialog--uiDialog t-Dialog-page--standard',
                            $(pTriggeringElementSelector));
                    }
                } catch (e) {
                    console.error(e, data);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error(errorThrown);
            }
        });
    }

You could call this function on a button click with Dynamic Action or any other way you like. The example code is mentioned below.
If you provided the value for the parameter “pTriggeringElementSelector” correctly, the other dynamic actions like refreshing a report when an event “Dialog Closed or Canceled” is triggered for a modal page opened by a button or a link, should work fine.

    /* An example code for calling the function,
       while using some default parameter values and overriding other parameter values */
    openApexModalDialog({
            pAppPageId: 18,
            pClearCache: "18,RP",
            pItemNamesCSV: "P18_ID,P18_CATEGORY",
            pItemValuesCSV: apex.items.P1_ID.getValue()+","+apex.items.P1_CATEGORY.getValue(),
            pTriggeringElementSelector: "#" + $(this.triggeringElement).prop("id"),
            pModalTitle: "Product Details"
            });

Thanks for reading. This is one of my little contributions to the awesome Oracle Apex Community.

I hope this quick trick will help you. Good Luck!

Effortlessly Launch Modal Pages in Oracle Apex Using This Custom JavaScript Function