Dynamic Actions in APEX

After visiting the OPP/APEXPosed conference in Brussels I decided to write a post on how to create a relatively simple dynamic action in APEX. When you are working with password fields your only visual check to see if the entered text in both fields match may be the number of characters entered. Of course you can check for equality on submit but that may be a bit too late for the user.
For this post I will work with a textfield instead of a password field, but both will work the same.

First of all we create a page.Dynamic Actions in APEX 1CreatePage thumb
A simple blank page will do.
Dynamic Actions in APEX 2CreatePageChoosePage thumb

Give it a title. Dynamic Actions in APEX 3CreatePageNumber n Alias thumb

Add a simple HTML region to hold the items.Dynamic Actions in APEX 4CreatePageName n Regions thumb

Don’t use tabs (for this demo ;-))Dynamic Actions in APEX 5CreatePageTabs thumb

Review what you just chose:Dynamic Actions in APEX 6CreatePageConfirmation thumb and press Finish.
The page should be created succesfully:Dynamic Actions in APEX 7CreatePageSuccess thumb
The page rendering part should look something like this:Dynamic Actions in APEX 8PageRendering thumb

When you open the context menu on the region you can choose to create a Page Item:

Dynamic Actions in APEX

For the demonstration we will choose Text Field (that way what we enter will be visible)

Dynamic Actions in APEX 10CreateItem thumb

Give the item a name:Dynamic Actions in APEX 11CreateItemA thumb

Give the item a label: Dynamic Actions in APEX 12CreateItemA thumb

Review the chosen options:Dynamic Actions in APEX 13CreateItemA thumb

The item doesn’t have to be conditionally displayed so you can just press ‘Create Item’ here:Dynamic Actions in APEX 14CreateItemA thumb

Repeat these steps for the second page item:

Dynamic Actions in APEX Dynamic Actions in APEX 16CreateItem thumb

Dynamic Actions in APEX 17CreateItemB thumb Dynamic Actions in APEX 18CreateItemB thumb

Dynamic Actions in APEX 19CreateItemB thumb Dynamic Actions in APEX 20CreateItemB thumb

Now the page rendering portion will look something like this:
Dynamic Actions in APEX 21PageRendering thumb

Using the context menu we can Create a Dynamic Action.Dynamic Actions in APEX

Give it a name and possibly a sequence.Dynamic Actions in APEX 24CreateDynamicActionName n Sequence thumb
Choose the event to use for this Dynamic Action to fire. In this case I think On Key Release will be the best choice. Choose the Selection Type, this action will rely on changes of items. Choose the items you want to fire this action.  In condition choose the kind of condition you want to use. Choose JavaScript Expression and type in your Javascript expression.

document.getElementById(‘P100_TEXTFIELDA’).value ==
document.getElementById(‘P100_TEXTFIELDB’).value

Dynamic Actions in APEX 25CreateDynamicActionJavascript thumb

Then select the kind of Dynamic Action you wish to create. We will be creating an Advanced Action

Dynamic Actions in APEX 23CreateDynamicAction thumb
Select what you will be doing when the condition evaluates to TRUE:
Dynamic Actions in APEX 26CreateDynamicActionTrueAction thumb
In this case we want to change the background color of the textbox, so we choose to Set the Style. We also want to execute this action when the page is loaded.Dynamic Actions in APEX 27CreateDynamicActionTrueAction2 thumb

When the condition evaluates to FALSE we want to do the same action, but with a different color
Dynamic Actions in APEX 26CreateDynamicActionFalseAction thumb

Then select the kind of page elements you want to be affected by this dynamic action.

Dynamic Actions in APEX 23CreateDynamicActionSelectionType thumb

Next we choose on which fields this dynamic action will fire:
Dynamic Actions in APEX 28CreateDynamicActionItems thumb Dynamic Actions in APEX 29CreateDynamicActionItemsSelected thumb

The Dynamic action now shows up in the Page Rendering section of our page.Dynamic Actions in APEX 30PageRendering thumb

Running the page shows our Dynamic Action in action:
Dynamic Actions in APEX 31DynamicActionDemo1 thumb Dynamic Actions in APEX 32DynamicActionDemo2 thumb Dynamic Actions in APEX 33DynamicActionDemo3 thumb Dynamic Actions in APEX 34DynamicActionDemo4 thumb

I hope this helps in your understanding of the process of building Dynamic Actions in APEX. Of course this is a pretty simple example and you can probably come up with better ideas for the use of Dynamic Action, but as you can see, this is done with next to no coding (just the Javascript for the condition took some coding).

This post has also been published on my personal blog: http://blog.bar-solutions.com

5 Comments

  1. Patrick Barel October 3, 2011
  2. S.M.Shohel Rana October 1, 2011
  3. Patrick Barel November 7, 2010
  4. Patrick Barel November 5, 2010
  5. Patrick Wolf November 5, 2010