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

APEX 5.1: Translate HTML5 Client-Side Validation Messages

You may know that in APEX 5.1 there are some new functionalities regarding client-side messaging - for example, the capability to display success or error messages without a full page reload or new JS API for handling client-side messages. There are also enabled HTML5 Form Validations, so you may saw something like this in your apps:

The problem that I had is that the user wanted to translate those messages to the other language (in my case Croatian). I thought - no problem. I'll find those messages in the APEX messages dictionary and translate them to the Croatian. After some exploring I found out that those messages are actually browser depended and you can't translate them (the only option is to install browser in different language).

Fortunately, the APEX development team has thought about this and you can override those messages by defining custom attribute named data-valid-message under the item's Custom Attributes property:

And now the form should look like this:

If you don't want to do this for each and every item in your app you can create On Load Dynamic Action on Global Page (page 0) that looks like this:

which will add this attribute to all required fields.

You can read more about the data-valid-message attribute in apex.item documentation.

Enjoy!

Tested on APEX 5.1.0.00.45

Handling client-side messages in APEX 5.1

You may noticed that in APEX 5.1 there's new JS namespace apex.message that is used to handle client-side messages.

Unfortunately, there's no documentation for it yet so I'll try to make a quick introduction to some features that you can use.

Edit (12/2017) : The apex.message documentation is available here.

Important notice: all examples are made in APEX 5.1.0.00.43 which is currently only available on apex.oracle.com. Some features may change in production version.

Most important features/function in new JS library that you can use are:

• apex.message.showPageSuccess - function to dynamically display standard APEX success message,
• apex.message.hidePageSuccess - function that enables you to hide page success message
• apex.message.showErrors - function to display page or inline error messages
• apex.message.alert - function to call new APEX alert dialog
• apex.message.confirm - function to call new APEX confirm dialog

Examples of how to the functions from above are available here.

Be careful when you use apex.message.alert or apex.message.confirm because they are a bit different than build-in browser functions alert() and confirm(). They don't block JS execution so you have to put code following the call into the callback function. For example, if we use following code:

apex.debug.log('Before APEX alert');
apex.message.alert('My Alert Message'
                 , function(){
                     apex.debug.log("You've pressed ok! ");
                   }
);
apex.debug.log('After APEX alert');

the output in JS console (before we click Ok button on alert dialog) will look like this:

And after you press Ok button it will look like this:

So, as you may see, JS code following the apex.message.alert call will execute before we even press Ok button (unlike calling browser's alert() function).

There are some additional advanced features available in new JS library like registering your own templates by calling apex.message.registerTemplates. You can also define custom hooks on some message events like beforeShow or beforeHide (see apex.message.setThemeHooks).

Go, explore and enjoy!