APEX – dialog delete confirmation

Tuesday, October 7, 2014

Are you tired of outdated confirmation boxes popping up every time you need to approve a delete action in one of your applications? I sure am. That’s why I decided to replace them with a jQuery dialog box. They are much more customizable to suit the look and feel of your application. The only requisite for this to work is to include the jQuery library in your application, which is integrated as of APEX 4.

You will be able to transform this:

into something like this:

First things first, create the Global Page (page 0) in your application if you haven’t done this already. On this page, create a new HTML region. As a template for this region, use “No Template” or “Div Region with ID”. Using either of these templates will make sure that the region is not visible on your page once rendered.

Next, create the source of this region as follows:

<script type=”text/javascript”>   

 

var confirmDialog = $('<div id="confirmDialog">').appendTo('body');

 

$('#confirmDialog').dialog({

  autoOpen: false,

  modal: true,

  resizable: false,

  buttons: [

          {

              text: "No",

              click: function() {

                  $( this ).dialog( "close" );

              }

          },

          {

              text: "Yes",

              click: function() {

                   apex.submit($(this).data('request'));

              }

          }

         ]

});

 

confirmDelete = function(a, b) {

  $('#confirmDialog').html('<p>'+a+'</p>');

  $('#confirmDialog').data('request', b);

  $('#confirmDialog').dialog('open');

}

</script>

 

This script will override the built-in function confirmDelete and instead of rendering a browser confirmation popup, a jQuery dialog will be shown. The same delete confirmation message and request will be used as in the browser’s confirmation box.

Note:  Depending on your version of APEX you may need to override apex.confirm instead of confirmDelete.

The best part of this approach is that this script will automatically be applied to all delete confirmations in your application. This way you don’t have to check you pages one by one to see if it utilizes a delete confirmation and then replace it.

Your dialog box probably won’t look like the one in this example by default. That is because I applied some CSS-rules to style the box and the buttons. You can find multiple examples of this on the internet.

If you don’t want the script to be implemented on every page but only on the pages with a delete action, you can make the region conditional to only be included on these pages. Example:

You can always create a plugin or a separate JavaScript-file of the source instead of using a page 0 region.

Have fun implementing this in your applications.

 

VT/JUVO