Friday, 15 January 2010

APEX 4.0 - Learn more about Dynamic Actions

Update: Please note, I have now updated my dynamic action sample application, the links in this post no longer work. Please see this blog post for details.

As many of you may know, APEX 4.0 Early Adopter's was released before Christmas. In this release, we introduce a new feature called 'Dynamic Actions' that provides a declarative way of defining client-side behaviour, without needing to know JavaScript. There is a simple wizard to create new dynamic actions, whereby you just specify 'When' the dynamic action will fire, the 'Action' itself and 'What' will be affected. As I said, you don't have to know JavaScript to do a fair amount with this feature, but there are also some hooks for JavaScript developers to extend the dynamic action framework to do a whole load more!!


To help you understand this feature, I have put together a sample application containing lots of different uses of dynamic actions such as drag and drop, styling page items and interactive reports, retrieving data from the server via AJAX, responding to plug-in item events such as the 'Slider' sliding and more. You can either view the application running on the EA instance here or download it from here, so you can install it in your own EA workspace and have a deeper look. If you haven't yet signed up for the APEX 4.0 Early Adopters, take a look at David Peake's related blog post where he explains how to get started.

Note: If you are installing this application, there is one supporting object defined containing a simple PL/SQL function 'getCommission' used by a couple of the examples. During the install, please install this supporting object to get the full functionality. Also, the application requires that you have a copy of the standard 'EMP' table in the parsing schema for the application.


The application makes use of a number of native dynamic actions (that will be built-in to APEX), but also contains 5 dynamic action plug-in examples which you can look at, install and play around with. The plug-ins are:
  • Draggable - Define page elements as draggable, with various options such as restricting by vertical or horizontal axis, transparency during drag, containment and more.
  • Droppable - Define page elements as droppable, with various options such as restricting which draggables can be dropped, styling to guide the user where they can drop the element and more.
  • Execute PL/SQL Code - Define a PL/SQL snippet right from within the dynamic action that will be executed on the server, via AJAX. This is currently only coded for Theme 1.
  • Highlight - Patrick Wolf's plug-in that provides the ability to highlight elements on the page.
  • Stripe Report - Used for striping interactive report regions with alternate row colours.
I have ensured all the plug-in code is thoroughly commented to try and help you understand exactly what's going on and hopefully get you started in building your own dynamic action plug-ins!!

Plug-ins are 1 of the major components of APEX 4.0 and if you're interested to learn more I can thoroughly recommend taking a look at Patrick Wolf's 'How to create a plug-in' blog post and accompanying downloads.

I hope you like the application and let me know how you get on!!!

Anthony.

PS: Many thanks to Patrick Wolf for his invaluable help in reviewing these plug-ins.

18 comments:

Martin Giffy D'Souza said...

Hi Anthony,

Thanks for posting this info. I just tried the link to your application and got an error.

Martin

Dimitri Gielis said...

Hi Anthony,

Apparently the link to the app doesn't work at the moment. it looks like there's a problem with the alias DA_DEMO. The direct link to the app works nicely http://tryapexnow.com/apex/f?p=11294

Very nice demo's Anthony, I like them a lot!

For the drag-drop; it would be nice when you drag a person to give him a salary increase that that person gets listed inside that box, so you know how got what... my first enhancement request to your plugin ;-)

Well done,
Dimitri

Tony Andrews said...

Anthony, the posted URL (http://tryapexnow.com/apex/f?p=DA_DEMO) isn't working for me - I get the error:

Error ERR-7620 Could not determine workspace for application ().

Stew Ashton said...

Clicking on the link to the demo returns an error :

Expecting p_company or wwv_flow_company cookie to contain security group id of application owner.
Error ERR-7620 Could not determine workspace for application ().

papakev said...

Hi Anthony,

the link to the hosted app isn't working.

getting...

Expecting p_company or wwv_flow_company cookie to contain security group id of application owner.
Error ERR-7620 Could not determine workspace for application ().

Anthony Rayner said...

This issue has now been resolved, huge apologies to you guys for this problem.

Dimitri: Glad you like (and found!) the demo's!! And thanks very much for the first enhancement request! It's a good one, I'll look into it.

Louis-Guillaume Carrier-B├ędard said...

good work!

Roel said...

Good to see you added the 'Stripe Interactive Report' plugin (you made it on site at OOW at my request...).
Roel

Jon said...

Really nice demonstration app. One point the "Disable/Enable" example doesn't work in IE.

Jon

Anthony Rayner said...

Thanks all for the feedback.

Jon: Thanks for catching this. It has to do with the fact the example uses event delegation to bind the 'change' handler to the parent element of the radio inputs. It seems IE has a problem with bubbling the change event up to the container, which is resulting in nothing happening. This is confirmed by this MSDN doc page regarding the 'onchange' event:
http://msdn.microsoft.com/en-us/library/ms536912%28VS.85%29.aspx

Thanks again for the feedback, I'll look into it.

Anthony

Anthony Rayner said...

Well, just noticed in jQuery 1.4 that they have the following update:

`change` and `submit` events normalized

Whereby, they have overwritten the default change and submit events in IE, so that they are the same across browsers. This is confirmed by their new doc page on the change event here:
http://api.jquery.com/change/

Where it states:

"As of jQuery 1.4 the change event now bubbles, and works identically to all other browsers, in Internet Explorer."

Nice, as soon as we pick up jQuery 1.4, which we hope to for APEX 4.0, then this will be resolved.

Thank you jQuery!!

Paul Brookes said...

Hi Anthony,

Fantastic post and great plugins. I've used some of them in an online shop app I've been developing. The details are on my blog:

http://peekbee.blogspot.com/

Thanks again,

Paul.

Anthony Rayner said...

Thanks Paul,

Nice work, looks good. I added a comment to your post as well.

Regards,
Anthony.

Ken Hemmerling said...

I just tried to access your link and am getting:

Expecting p_company or wwv_flow_company cookie to contain security group id of application owner.
Error ERR-7620 Could not determine workspace for application (11294).

The reason I found your page was that I'm getting the same error on my in-house application. Can you explain what you need to do to address this?

Ken Hemmerling said...

I just tried to access your link and am getting:

Expecting p_company or wwv_flow_company cookie to contain security group id of application owner.
Error ERR-7620 Could not determine workspace for application (11294).

The reason I found your page was that I'm getting the same error on my in-house application. Can you explain what you need to do to address this?

Ken Hemmerling said...

I just tried to access your link and am getting:

Expecting p_company or wwv_flow_company cookie to contain security group id of application owner.
Error ERR-7620 Could not determine workspace for application (11294).

The reason I found your page was that I'm getting the same error on my in-house application. Can you explain what you need to do to address this?

Anonymous said...

Link http://tryapexnow.com/apex/f?p=11294 not working - Advise on alternative link.

Fred

Anthony Rayner said...

Hi Fred,

For details of the new sample application, please see this post:

http://anthonyrayner.blogspot.com/2010/07/apex-40-new-dynamic-action-sample.html

Anthony