Wednesday, June 7, 2017

Auto hide client-side messages

Probably somebody did blog about it but I haven't found it yet.

The Problem

If you didn't modified your Universal theme, by default, success and validation messages appear in the top right corner of a page and you have to close them manually or they disappear when you refresh/submit your page.

It can be confusing when you are on a page with Interactive Grid and you change something repeatedly and successfully - it seems like nothing happened. So let's see how to hide them...

The Solution

It can be done by using theme hooks under apex.message namespace.

How To

If you want that all your client side messages are hidden after 3 seconds you should call this code:
apex.message.setThemeHooks({
  beforeShow: function(pMsgType, pElement$){
    setTimeout(function() {
      $('.t-Alert').fadeOut('slow');
    }, 3000);  
  }
});
Where second parameter in setTimeout function (with value 3000) is number of milliseconds. In my case it's 3 seconds.

If you want to hide only success or error/validation messages you can use pMsgType variable. For example:

apex.message.setThemeHooks({
  beforeShow: function(pMsgType, pElement$){
    if (pMsgType=='success'){ 
   setTimeout(function() {
        $('.t-Alert').fadeOut('slow');
      }, 3000);
    }   
  }
});
For error/validation messages pMsgType parameter equals error.

To apply this code for all pages in application put this in Page Load dynamic action on global page (page 0) or in your custom JS file (preferred).

Demo is available here.

Enjoy!

Tested on APEX 5.1.1.00.08