Wednesday 22 September 2010

JQuery Error Page Replacement

Yesterday I commented on using JQuery to replace the standard JavaScript dialog boxes.

Another simple solution to pretty-up your application is to replace the standard error display.

I'm not so much referring to making the messages user friendly, Martin Giffy D'Souza covered that very well recently, and you may have also seen Roel's example in the past.

So to really summarise their posts, define an On-Demand Application process called GetErrorMessage.
BEGIN
  -- this is probably the simplest example available - limited by imagination.
  htp.p('error title'||'#'||wwv_flow.g_x01);
END;

The following needs to be in the Error Page Template section of your page template.
<script type="text/javascript">
$(document).ready(function() {
  raiseErrorHandler();
}
);
</script>
And most of this you may choose to leave alone, except for the highlighted lines. I place it in my application's JavaScript file:
function raiseErrorHandler(){
  vError = $(".ErrorPageMessage");
  vError.hide();
   var get = new htmldb_Get( null, $v('pFlowId')
                ,'APPLICATION_PROCESS=GetErrorMessage'
                ,$v('pFlowStepId'));
   get.addParam( 'x01', vError.html());
   gReturn = get.get();
   get = null;
   var errArray = gReturn.split("#",2);
   showError( vError, errArray[0], errArray[1]);
}


function showError(pThis, pTitle, pText){
 vText = '<div id="alert" title="'+pTitle+'">'
          +'<img src="/i/alert_error.gif">'+pText+'</div>';
  $(pThis).append(vText);
  $("#alert").dialog({
               bgiframe: true,
               modal: true,
               minHeight : 200,
               width : 600,
               closeOnEscape : false,
               close : function(){window.history.go(-1)},
               buttons: {
                   Ok: function() {
                     $(this).dialog('close');
                     $("#alert").remove();
                     window.history.go(-1);
              }}
   });
}

Then bang, you have a mildly more beautified application.

I scraped this example off the application I'm currently working on. We have not yet filtered the errors to display something more user-friendly - but you can read more Martin's post about that.

Basically instead of navigating to the default error page, you get this pop-up instead.

ScottWe

4 comments:

Stew said...

Scott,

Looks interesting. Do you have a demo example or a screen shot? I can't quite picture what this will look like from the provided code.

Thanks,

Stew

Scott Wesley said...

Stew,

I have updated the post to include a screenshot.

Cheers ;-)

Aritz said...

Hi!
It's been long time since the post and I know there is available a new stuff in 4.1 version to handle this kind of exception but I am not authorised to upgrade the version so I have been trying to implement your codes and I have a problem, where is application's JavaScript file???

Thanks!

Scott Wesley said...

Hi Aritz,

You can include your own .js and .css files by modifying the page template, or you can just past your javascript code in the page attributes.