APEX: CONFIRM pop-up message on Navigation List (JavaScript)

Compatibility: APEX 4.2.2

In this post we will talk about the CONFIRM pop-up message in APEX with the following useful example. This is JavaScript implementation and I find it more transparent than using dynamic actions. The message must appear when clicking on the navigation menu item.

Why would I use it 

In the application I'm currently developing, there is a home page with public access to it. The menu (navigation list) consists of few links to other public pages, while the last link is designed for authenticated users that require authorization to view the page.

To prevent public user from clicking on the protected link with the following access violation error, I created a CONFIRM pop-up message to notify the user and let them choose what to do next.

My Page

As you can see from the picture, the pop-up message must appear when someone is clicking the "Requests" menu item. The region type is list.

Development Steps 

1. Adding JavaScript code on your menu page:
Page properties -> JavaScript -> Function and Global Variable Declaration:

function setURL() {
  var page = "requests";  
  var url = "f?p=" + "&APP_ID." + ":";
  var ssn = "&APP_SESSION.";  
  var msg = "Only members of Admin group. \nAuthentication required. Proceed anyway?";

  if (confirm(msg) == true) {
      window.location.assign(url + page + ":" + ssn);  
  } 
}

Here:
var page = "requests" - in my case page alias, as I don't want to hardcode page numbers. Bear in mind to indicate the alias on the page you want to be redirected to in Page properties -> Name -> Page Alias
var ssn = "&APP_SESSION." - we don't want to generate new user session, so let's keep the current one.

In my case I don't need to handle CANCEL request, but if you want to just change the IF clause to the following:
  if (confirm(msg) == true) {
      window.location.assign(url + page + ":" + ssn);  
  } else {
      // your code here
  }

2. Changing the navigation list:
Shared Components -> Lists -> Navigation (this is the name of my list). Properties of the list item.
NOW IMPORTANT: in Traget - > Target Type Set Type "URL" and insert your function call in URL Target

So now your navigation list looks like this:

Final Result
Let's now click on "Requests" menu item and see what we've got:

The OK button will redirect us to another page while Cancel will just close the window and do nothing.

To reuse this method on the same page for other menu items, just make the var page variable an input parameter.

Useful Links
JavaScript Popup Boxes
APEX API reference - apex.confirm method - Alternative way to JavaScript function

Enjoy!