Thursday 15 June 2017

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 

3 comments:

  1. Just wanted to say your blog helped me, thank you!

    ReplyDelete
  2. Hi,

    Why do you use apex.theme42.util.configAPEXMsgs (previous name was apex.theme42.configureSuccessMessages) in combination with apex.message.setThemeHooks?

    We ran into the issue that after the success message was hidden, the buttons on the page were not clickable anymore.
    If we only use apex.theme42.util.configAPEXMsgs, the issue disappeared.

    regards,

    Mathieu

    ReplyDelete
    Replies
    1. Hi Mathieu, at the time when I wrote this post that was only thing that worked for me. Nothing more than this. Thanks for sharing it.

      Delete