Saturday, May 22, 2010

New Region Events in APEX 4 – This is exciting!

With the right tools just about anything is possible. APEX 4 will be introducing all kinds of new tools many of which are well known at this point. Anthony Rayner recently let me know about another new feature not many people know about: new JavaScript events associated with AJAX enabled regions like the interactive and classic reports.

When such a region refreshes, two events will be triggered:

  • apexbeforerefresh
  • apexafterrefresh

A developer can bind to these events as follows:

apex.jQuery('#[region id]').bind('apexafterrefresh', function(){
  // your code here.
});

jQuery’s “live” method could have been used in some cases to overcome the lack of such events – but it wasn’t always enough. Some developers came up with clever workarounds using timeouts but like most workarounds the solutions were not  exactly optimal.

The ways in which these new events can be used may not be immediately obvious, but when developing highly interactive web 2.0 applications such events are necessary.  What’s important is that you remember these new events exist so you can employ them when you run into a situation that requires their use.

Here’s an example where someone wanted  to display a “refresh timestamp” when an IR region refreshes. I’ve put together a demo that uses the apexafterrefresh to accomplish that task as well as a more complex one: floating headers!

Have a look at the demo here. Don’t forget scroll down to get the full effect.

For those of you that would like to duplicate this functionality you’ll have to wait for APEX 4 (perhaps I’ll turn it into a plugin), but here’s the code:

8 comments:

  1. Hi Dan,

    really nice effect with the header!

    Looking forward to see that as a dynamic action plug-in!

    BTW, just as an additional information to your article. The apexbeforerefresh and apexafterrefresh are also exposed as events for dynamic action. So someone can easily attach actions to this events in a declarative way. The action "Refresh" can be used to manually trigger a refresh of an IR or classic report. But can also be used for cascading LOVs.

    Regards
    Patrick

    ReplyDelete
  2. On the floating header, there seems to be a slight bug, in that when you load it for the first time the break th element has a width of 20px instead of the 40px.. so falls short of the whole width of the report.... After you push Go, it corrects itself back to 40px (in Chrome at least). Check - just tested in Firefox, has the correct width all the time, Chrome corrects itself after pushing go, and it always falls short in IE (8)

    Also, when pushing Go in IE and Firefox you get that loading animation at the top of the page, but not in Chrome (and I presume for Safari) - is this your implementation or a part of the IR?

    ReplyDelete
  3. Patrick,

    Thanks! Wait till you see the new "APEX Schedule" plug-in!

    I was hoping some of the team would help fill in the blanks on these events... ;)

    Trent,

    Thanks! I also noticed the bug - I always test on multiple browsers. However, for this article (and because APEX 4 is not yet out) I didn't think it had to be 100% there.

    I have a hunch it has to do with the images not having loaded yet. If I'm correct then a fix would be relatively simple. I will make this a dynamic action plug-in and will make sure the bug is fixed at that time.

    ReplyDelete
  4. Hi, this floating header is as useful as it is cool. However, on Firefox if I use any of the filters the header doesn't float anymore.

    ReplyDelete
  5. Stew,

    Thanks, I was playing with the code a little bit and broke it. I put it back as it is listed in the forum.

    When I make this as a plug in for version 4, I'll make sure it works 100% as expected.

    Regards,
    Dan

    ReplyDelete
  6. Any way to do something similar in Apex 3.2 using JQuery Live?

    ReplyDelete
  7. Tim,

    Wouldn't that be great! Unfortunately, no... :(

    The events were not triggered in 3.2. There are some Ajax observer methods in jQuery that could be used to do things when Ajax processes finish running, but APEX doesn't currently use jQuery for Ajax so these will not work either.

    You could override the Ajax functions that APEX uses to do what you want, but then you are working against the grain and that will cost you. I'm afraid you'll need to upgrade...

    Regards,
    Dan

    ReplyDelete
  8. Thanks for the quick response...

    Unfortunately it isn't up to me whether/when we upgrade!

    I think I found another way to get the end result that I was looking for.

    Again, thanks for the quick response.

    ReplyDelete