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: