Dienstag, 17. Januar 2017

ORACLE APEX 5.1 Fade Success Message automaticly




APEX 5.1 Fade success message


We have all wait a long time of APEX 5.1.
One oft he most important feature of 5.1 is Interactive grid.

Were i was playing with 5.1 i see that the success message dont fade out like in 5.0.
For 5.0 i found a solution and i try the same one for 5.1, but it doesnt work.

So i inspect the HTML code and found the change with the APEX_SUCCESS_MESSAGE.

I search the div container to see the success message but i can find it.

Were he is?

After i start an save process i saw what i want the little green box in the upper right corner





I inspect the HTML again and saw that there is the div with the id t_Alert_Success.
Okay the div is didnt render if i come on the page the first time.
 
I need a function to check permanently the changes of APEX_SUCCESS_MESSAGE.
Because, APEX add classes to APEX_SUCCESS_MESSAGE.
So i found MutationObserver and it was what i need. 
I Implement it on a global page to have the outofade on all pages.

1. Create a Dynamic Action on Global page
  - Event: Page Load






2. True
  -Action: Execute JavaScript Code




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// The node to be monitored
var target = $( "#APEX_SUCCESS_MESSAGE" )[0];

// Configuration of the observer:
var config = { 
  attributes: true, 
  childList: true, 
  characterData: true 
};

// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added
      var $nodes = $( newNodes ); // jQuery set
      $nodes.each(function() {
        var $node = $( this );
        if(  $('#APEX_SUCCESS_MESSAGE').hasClass( "u-visible" ) ) {
          // do something
            $('#t_Alert_Success').ready(function() { 
                setTimeout(function() { 
                   $('#t_Alert_Success .t-Button--closeAlert').click();
                     }, 3000); // here u can change the view time
            });
        }
      });
    }
  });    
});
 
// Pass in the target node, as well as the observer options
observer.observe(target, config);



Thats it!!

Kommentare:

  1. Tim! Your Plugin works great!
    Put it on page 0 as you say and the whole app is handled.

    Thanks for your help!
    Bill Carlisle

    AntwortenLöschen
  2. Thanks Bill.
    I'm glad to hear that.

    Tim

    AntwortenLöschen
  3. Would this work on Apex 18.1 too?

    AntwortenLöschen