APEX 22 UT auto dismiss a success message revisited

 

APEX auto dismiss a success message revisited

APEX 21.x and 22.x auto success message handling

As it sometimes happens we have to revisit and update posts we made in a past. This is one of these ones. 

We all have wanted to auto hide our success messages and back in 2017 I wrote a post to re-conciliate how one would do this for APEX 5.1 and later. Since some things have changed and some JS API got deprecated here is a take two. 

This should take care of auto hiding of Success message in APEX 21 and 22 versions probably APEX 20.x version also. Since I did not have access to APEX 20.x version just bare it in mind it is a theory. 

We are starting with the usual  

 

Perfect, we got the success message. 

There are two sub scenarios how we can get it shown. First is when page submit with PLSQL process success message happens and second one is when DA success message triggers. 

Of course that we would remember we have seen this before and we've done it hundred times before so I would open apex.oracle.com/UT scrolled down to JS APIs and find this code 

apex.jQuery(function() {
  apex.theme42.util.configAPEXMsgs({
    autoDismiss: true,
    duration: 5000  // duration is optional (Default is 3000 milliseconds)
  });
});

If you copy it over into your On Page Load DA it would do the trick. Great, it works in every situation. Our job is done!!! 

Well not really, sometimes you may want to be little bit more sophisticated and you can opt for an option with a nice fading effect. Please correct me here but there is currently no option to specify fading effect here in apex.theme42.util.configAPEXMsgs. It would be such a nice add-on to it, wouldn't it. :)

How would we do it then? Again we rush to apex.oracle.com/jsapi and here we would find another interesting code that gives us more options. 

apex.message.setThemeHooks({
    beforeShow: function( pMsgType, pElement$ ){
        if ( pMsgType === apex.message.TYPE.SUCCESS ) {
            pElement$.addClass( "animate-msg" );
        }
    },
    beforeHide: function( pMsgType, pElement$ ){
        if ( pMsgType === apex.message.TYPE.SUCCESS ) {
            pElement$.removeClass( "animate-msg" );
        }
    }
});

With a little fine tuning we would get to

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

Let's try this out and see what happens. Soon we would pick that things are still not quite there yet. 

If we submit a page and process emits a success error this would not cater for it. It almost seems a timing issue in APEX, like the success message comes before this event registers it. 

What on the other hand is working fine it does seem to catch any apex.message.showPageSuccess( "Changes saved!" ); messages raised in my app.

To sort page submit success message problem on my page I used this

$(".t-Alert .t-Alert--success").ready(function(){
    console.log('OnSubmitSuccess Handler to execute');
    setTimeout(function() { 
        $('.t-Alert').fadeOut('slow');
    }, 3000);   
});

Not sure if this is the most elegant way to go but it works. Now in combination of the two calls they handle situations correctly. I would call it too many lines of code if you ask me but it is what it is.

To conclude, I wish APEX JS APIs in the future gives use out of the box ability to specify fading option in apex.theme42.util.configAPEXMsgs - fewer lines of code and easier to use. Thank you.

JS Code is here - https://codeshare.io/9Onz8K.

Happy APEXing,

SLino