APEX Universal theme auto hide success message

APEX 5.1 auto hide success message

Auto Client side error messages handling

Follow up post on few posts out there

Recently I noticed few blog posts on this problem and lazy me said cool something interesting and useful that I would want to reuse. Then I noticed few issues and wanted to write this blog in order to complete the picture.

Situation 

We have form or interactive grid where we can edit and save some data. Excellent but why does not this success message that confirms all went well auto retrieves. How do we sort that?

 

 As you see user has to click in order to close the mesage.

Solution 

There are few blog posts out there dealing with the same issue but none were complete or better said they worked perfectly in certain situation. At least we were getting still some issues so we decided to merge them into one. :)

Marko's blog explains in detail how to sort this out on IG type of page which is awesome. But what happens if you by accident set this up

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

to be executing on page load on your Page 0 global page. It breaks some of modal page functionality if modal page gives throws any error. So make sure you use

if (pMsgType=='success'){

condition. Also it did not seem to sort issues with regular Form submits.

Other one was from Mark. 

Which on the other hand sorts the problem of saving the regular form by auto dismissing the message. But it would get stuck if user would click on 'X' trying to manually close the message.

All credentials go to original posters of course. For my future reference this was what worked for me: 

apex.jQuery(document).ready(function() {
    
    var opt = {
        autoDismiss: true,
        duration: 3000 // 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;
    }

 //Marko code
 apex.message.setThemeHooks({
   beforeShow: function(pMsgType, pElement$){
   if (pMsgType=='success'){ 
     setTimeout(function() {
    $('.t-Alert').fadeOut('slow');
     }, 3000);
   }   
    }
 });
 
 
 //Additional
 $('.t-Button--closeAlert').click( function(){
   $('.t-Alert').fadeOut('slow');
         //console.log('clicked'); 
    });
 
 
});

Only in this combination things seems to work.

Happy Apexing,
SLino 

Tested on internal and apex.oracle.com on APEX version 5.1.1.00.08