Auto hide client-side messages

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

The Problem

If you didn't modify 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-Body-alert .t-Alert').fadeOut('slow');
    }, 3000);  
  }
});

Where the second parameter in setTimeout function (with value 3000) is a 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==apex.message.TYPE.SUCCESS){ 
   setTimeout(function() {
        $('.t-Body-alert .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 the global page (page 0) or in your custom JS file (preferred).

The demo is available here.

Enjoy!

Tested on APEX 5.1.1.00.08