Oracle APEX: Open a modal page With Javascript

Oracle APEX: Open a modal page With Javascript

A brief explanation about apex.navigation.redirect

ยท

3 min read

Hello Everyone ๐Ÿ‘‹ Today I want to introduce you to apex.navigation.redirect a special method available on APEX Javascript API to redirect the user to any page.

If you still don't understand what I'm saying, allow me to explain:

What is common?

Often, when you need to make a custom URL โ€” Set some items, make a request, etc โ€” you will possibly resort to an Ajax callback to make that URL on the back end using some function like APEX_UTIL.PREPARE_URL to build the URL with a valid checksum and session number, returning this URL using the apex.json package right after. However, if you ever tried to use that returned URL from a modal page, you know that it returns more than just the simple URL, making it impossible to use window.location.href or other simple methods to redirect the user.

Let's see what is the value of the returned URL:

  • I made this simple function that is called by clicking on my card:

  •         function goToModal(userId) {
    
                ajaxCallback = {
                    success: function (resp)
                    {           
                        console.log(resp.url) //let's see what you do hehe
                    },
                            error: function(a,b,c){ console.log(a,b,c)}
                }
    
                dataSent = {x01: userId};
    
                apex.server.process('AJAXCB_GOTO_MODAL',dataSent,ajaxCallback);
            }
    
  • My AjaxCallback is:

  •         DECLARE
                l_url varchar2(2000);
    
            BEGIN
                l_url := APEX_PAGE.GET_URL(p_page => 4,
                                           p_items => 'P4_USUARIO_ID',
                                           p_values => apex_application.g_x01);         
    
              apex_json.open_object; 
              apex_json.write('url', l_url); 
              apex_json.close_all; 
    
            END;
    
  • So, if I click on my card, I get this:

  • It returns a Javascript code that can call the modal on its own.

Knowing this, many developers end up using eval() to execute the code right away and bring the modal on. But, unfortunately, it is a development bad practice because it makes your application more vulnerable. Beyond that, normal pages cannot be opened using eval().

How can apex.navigation can help?

On Oracle documentation of apex.navigation we can find the method redirect, but there is nothing in the documentation signaling that we can use this method to execute the Javascript code shown above:

The apex.navigation.redirect method receives the URL as a parameter, but a few folks know that method can also receives the Javascript code that is returned by a modal when we use APEX_UTIL.PREPARE_URL or APEX_PAGE.GET_URL โ€” my favorite.

So, the final snippet was like this:

function goToModal(userId) {

    ajaxCallback = {
        success: function (resp)
        {           
            apex.navigation.redirect(resp.url); //do this instead of eval()
        },
                error: function(a,b,c){ console.log(a,b,c)}
    }

    dataSent = {x01: userId};

    apex.server.process('AJAXCB_GOTO_MODAL',dataSent,ajaxCallback);
}

If I click on my card now, the modal is opening as expected:

Of course, this method works for normal pages as well:

Conclusion

If you ever were struggling with opening a modal on APEX, the apex.navigation.redirect solves 99% of scenarios where it is a challenge! Is an alternative to avoid eval() and make your applications safer and the code better written and understandable.

ย