THDevelops Blog: Januar 2017

Mittwoch, 18. Januar 2017

APEX 5.1 FadeOut Plugin

Hi together,
for a simple implementation to Fade out the Success message i wrote my first plugin.
The Download is available

Apex 5.1 FadeOut Success Message

or

https://github.com/THDevelop/APEX-5.1-FadeOut-Success-MSG

Installation:

Import the Plugin

Create a Dynamic action on Page load
go to the true block and choce by action APEX Fade Out
after that you can set your display Time in ms.

UPDATE:
I have got an info from Shakeep there is a function in the API Oracle Apex Api FadeOut to fade the succsess message.
I Would say this Plugin is for all they are not familia with jequery and want a simple quick implementation.

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

// 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!!

ORACLE APEX 5.0.x FadeOut Sucess Message automaticly

APEX 5.0.x Simple Solution to fade out success message

Some know the Problem with the success message in APEX they dont want fadeout automaticly. I have found a simple soulution to made it.

1. You have the desition if you want it for all Pages or for a single page.
    Set it on Global Page (0) for all pages.
    Set it on the page were you ant to fadeout the message
    The steps are the same.

2. Create a dynamic action
- Event: Custom
- Selection type: Javascript Expression
- JavaScript Expression:

1	$("#t_Alert_Success").length > 0

3. True Block

- Action: Execute JavaScript Code

1
2
3

  $( document ).ready(function() {
      $( "#t_Alert_Success" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
  });

- Selection Type: jQuery Selector
- jQuery Selector: #t_Alert_Success

- Fire On Page Load: YES