Wednesday, June 7, 2017

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

18 comments:

  1. Hi
    I did exactly the same on a page with editable report and no theme changes...Apex 5.2 but it doesn't work.
    I wonder why

    ReplyDelete
    Replies
    1. Hi!

      APEX 5.2? That doesn't exists. Do you mean 18.2?

      Br,
      Marko

      Delete
    2. Sorry Marko i meant Apex 5.1

      Delete
    3. It should work. Where did you put this code? Is there any JS error in console window?

      Delete
    4. Hi

      where to put this code?

      Kind Regards

      Delete
    5. Read the last sentence:
      "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)."

      Delete
  2. Thank you! It worked for me.

    Fernando

    ReplyDelete
  3. My success messages don't go away. I tried both first code for all messages, and second one for either success or error. The errors go away but not the success messages. What am I missing ?

    ReplyDelete
    Replies
    1. It's hard to figure it out like this. What's your version of APEX? Can you make an example on apex.oracle.com so I can see the code?

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hey Alice,
      Maybe you were solving the same problem as me - this one article is only about client-side validations which apears like any checks or saving messages.
      As you are submiting page and your message came in URL, this will not help you. But try this one article, that helped me: http://lschilde.blogspot.com/2017/06/apex-universal-theme-auto-hide-success.html
      Now I am using combination of both codes:

      apex.jQuery(document).ready(function () {
      var opt = {
      autoDismiss: true,
      duration: 2000 // Optional. Default value is 3000
      }
      // this only applys configuration when base page has a process success message ready to display
      apex.theme42.configureSuccessMessages(opt);
      if (apex.theme42.configureSuccessMessages.options === undefined) {
      apex.theme42.configureSuccessMessages.options = opt;
      }
      });

      apex.message.setThemeHooks({
      beforeShow: function(pMsgType, pElement$){
      if (pMsgType=='success'){
      setTimeout(function() {
      $('.t-Alert').fadeOut('slow');
      }, 2000);
      }
      }
      });

      Hope it will help you too :)

      Delete
    4. Hi Vladimir,

      did you take a look at UT JavaScript API:
      https://apex.oracle.com/pls/apex/f?p=42:6201:

      There's apex.theme42.util.configAPEXMsgs that can be used for hiding messages.
      Btw. apex.theme42.configureSuccessMessages is deprecated and it will be removed in a future release.

      Delete
    5. Hi Vladimir: We migrated to APEX 19.1 and the code provided by Marko worked like a charm. Thanks so much for reviewing my quest and providing an alternate solution.
      Alice

      Delete
  4. .t-Alert isn't very specific, and hides any alert regions on the page.

    Would .t-Alert--success be more appropriate?

    ReplyDelete
    Replies
    1. True! Maybe, better way (if you use alert regions) would be to use selector $('.t-Body-alert .t-Alert')

      Delete
  5. Or use apex.message.hidePageSuccess(); to avoid selectors, though sans fade.

    ReplyDelete
    Replies
    1. apex.message.hidePageSuccess by default hides only success messages, but it can be overridden with beforeHide callback to do the both.

      Delete
    2. ...but probably the best way to do it is to use UT JS API https://apex.oracle.com/pls/apex/f?p=42:6201

      Delete