Understanding Dynamic Actions

Learn how dynamic actions can provide complex client-side behavior declaratively without the need for JavaScript.

About Dynamic Actions

Learn about dynamic actions.

Dynamic actions enable you to declaratively define how components respond to various user interactions (such as button clicks, items changing, and so on) without any complex coding or JavaScript knowledge.

When you create a dynamic action, you specify an action that will be performed when a defined set of conditions occur. You can also specify which elements are affected by the action and how and when they are affected.

A dynamic action consists two parts: Triggers and Actions. The Trigger defines the condition upon which the Action takea place. The Action enables you to dynamically do anything you would normally achieve using a combination of JavaScript and CSS such as showing or hiding page components, setting values, executing PL/SQL code and so on.

When working with dynamic actions, keep in mind that the more dynamic actions you add to a page, the greater your overall page size. The dynamic action framework emits additional code to the client for each dynamic action defined, which then must be downloaded and executed by the framework in the client.

The process of implementing a dynamic action involves the following steps:

1. Create (or use an existing) page component such as an item, button or region. This component is referenced within the dynamic action, in defining when it fires.

2. Create a dynamic action on the application page that invokes the action.

3. Run your application to test the dynamic action.

Tip: See Debugging Dynamic Actions for information on how to debug problems.

Tip:

To view dynamic action examples, install the sample app, Sample Dynamic Actions. To learn more, see Installing Apps from the Gallery.

For guidance on creating Dynamic Actions that use Generative AI, see About Including Generative AI in Applications.

About Dynamic Action Events

Learn about supported dynamic action events.

You can define dynamic actions to fire based on events that happen on the page. APEX includes four different categories of events: Browser events , Framework events , Component events , and Custom events. This section describes all supported events, including the internal JavaScript event name in brackets.

Browser Events

Note: Refer to the W3C UI Events specification for details about browser events or consult a reputable JavaScript reference. The events that begin with apex are events that wrap native touch events.

• Change (change) - Fires when a control loses the input focus and its value has been modified since gaining focus.

• Click (click) - Fires when the pointing device button is clicked over the triggering element.

• Double Click (dblclick) - Fires when the pointing device button is double clicked over the triggering element.

• Double Tap (apexdoubletap) - Fires when the pointer is doing a double tap/click.

• Get Focus (focusin) - Fires when the triggering element receives focus by either a pointing device or by tabbing into the element.

• Input (input) - This event is triggered every time the value of the element changes. It differs from the change event, which is only triggered when the value is committed, for example, by pressing the enter key or selecting a value from a list of options. Use the input event when you want to respond immediately to user input, whether it’s typed using the keyboard or pasted from the clipboard.

• Key Down (keydown) - Fires when a key on the keyboard is pressed. Use this event when you want to capture special keystrokes such as arrow keys, after a key has been pressed.

• Key Press (keypress) - Fires when a key on the keyboard is pressed resulting in text being entered. Use this event when you want to capture actual text entry.

• Key Release (keyup) - Fires when a key on the keyboard is released. Use this event when you want to capture special keystrokes such as arrow keys, after a key has been released.

• Lose Focus (focusout) - Fires when the triggering element loses focus either by the pointing device or by tabbing out of the element.

• Mouse Button Press (mousedown) - Fires when the pointing device button is pressed over the triggering element.

• Mouse Button Release (mouseup) - Fires when the pointing device button is released over the triggering element.

• Mouse Enter (mouseenter) - Fires once when the pointing device is moved into the triggering element.

• Mouse Leave (mouseleave) - Fires once when the pointing device is moved away from the triggering element.

• Mouse Move (mousemove) - Fires when the pointing device is moved while it is over the triggering element.

• Page Load - Fires when the page DOM content has loaded using the jQuery ready handler.

• Page Unload (unload) - Fires when a page is unloaded.

• Pan (apexpan) - Fires when the pointer is down, then moved in a horizontal direction.

• Press (apexpress) - Fires when the pointer is down for greater than 250ms.

• Resize (resize) - Fires when the browser window is resized.

• Resource Load (load) - When the triggering element is the window element (using a JavaScript Expression value of window in the When attributes), the event fires when the browser finishes loading all content within a document, including window, frames, objects and images. For other elements, this event can only be used for elements associated with a URL: images, scripts, frames, iframes.

• Scroll (scroll) - Fires when a scrollable triggering element is scrolled. This could be the browser window (using a JavaScript Expression value of window in the When attributes), scrollable frames or elements with the overflow CSS property set to scroll (or auto when the element’s explicit height is less than the height of its contents).

• Select (select) - Fires when a user selects some text in a text field.

• Swipe (apexswipe) - Fires when the pointer is moving fast in a horizontal direction.

• Tap (apextap) - Fires when the pointer is doing a small tap click.

Framework Events

• After Refresh (apexafterrefresh) - Fires after the triggering element has been refreshed. The event is only valid for triggering elements that perform Partial Page Refresh and fire this event. The native components that support this are Interactive reports, classic reports, charts, list view, and all item types with cascading LOV support. Plug-ins might support this event as well. This event can be sent by the apex.server.plugin and apex.server.process APIs when the refreshObject option is provided. See apex.server in Oracle APEX API Reference

• Before Page Submit (apexbeforepagesubmit) - Fires before a page being submitted.

• Before Refresh (apexbeforerefresh) - Fires before the triggering element has been refreshed. The event is only valid for triggering elements that perform Partial Page Refresh and fire this event. The native components that support this are interactive reports, classic reports, charts, list view, and all item types with cascading LOV support. Plug-ins might support this event as well. This event can be sent by the apex.server.plugin and apex.server.process APIs when the refreshObject option is provided. See apex.server in Oracle APEX JavaScript API Reference.

• Dialog Closed (apexafterclosedialog) - Fires when an APEX dialog is closed. This event only fires when the dialog is closed using the Close Dialog page process, or the Close Dialog dynamic action.

• Dialog Closed or Canceled (apexafterclosecanceldialog) - Fires when an APEX dialog is closed or canceled. This event fires when the dialog is closed using the Close Dialog page process or the Close Dialog dynamic action. This event also fires the user cancels the dialog (for example by pressing the pressing the ESC key or using the Cancel Dialog dynamic action).

Component Events

These events are available when there is a component (either an item, region, or dynamic action) available to your application that triggers a custom event. These events appear in the following format Event name [Component Name], for example the Change Order event triggered by the Shuttle native item type appears as Change Order [Shuttle]. Component events are either triggered from native components shipped with APEX, or from plug-in components you have installed into your application.

• Events triggered by native components:

  These will be in the format Event name [Component Name]. For help related to events raised by our native components, see interactiveGrid and treeView. See interactiveGrid and treeView in Oracle APEX JavaScript API Reference.

• Events triggered by plug-in components:

  These will be available when added to your current application and will be in the format Event name [Component Name].

  Tip: For help related to events raised by plug-ins, refer to Help text on the plug-in configuration page. Navigate to Shared Components, Plug-ins, plug-in name, Help Text. Help Text content is provided by the plug-in author.

Custom Events

• Custom Events:

  By selecting Custom an additional field displays enabling you to define of a custom event. This is useful when the native or plug-in provided events are insufficient.

About Supported Actions

Learn about supported action types.

After you specify Dynamic Action attributes in the Property Editor, you define the TRUE Action or FALSE Action you want to perform. The following section lists supported action types.

AI

• Generate Text With AI - Invokes the configured Generative AI Service to generate a one-time response based on user content. This action is ideal for tasks like summarizing or translating text, extracting keywords, or drafting an email.

• Show AI Assistant - Shows the AI Assistant, an AI-powered chat service, displayed either as a dialog or inline.

Component

• Clear - Clears the affected elements. Clear Errors - Clear errors displayed on the page.

• Close Region - Closes a region, such as inline dialog, inline popup, or collapsible, that supports being opened and is opened.

• Collapse Tree - Collapse the current node in a tree region.

• Disable - Disables the affected elements. Disabling makes these elements non-editable so that they do not retain item values when the page is submitted.

• Enable - Enables the affected elements.

• Expand Tree - Expand the current node in a tree region.

• Hide - Hides the affected elements.

• Open Region - Opens a region, such as inline dialog, inline popup, or collapsible, that supports being opened.

• Refresh - Refresh the data content of an item or region component such as Template Reports, Interactive Reports, or Interactive Grids or cascading LOV items. Not all regions and items support refresh.

• Set Focus - Sets the focus to the affected elements. This will default to the 1st of the affected elements if there are multiple. This can be especially useful when used in conjunction with the Show and Enable actions to take the user straight to the appropriate item.

• Set Value - Sets the value of the affected elements.

• Show - Shows the affected elements.

• Trigger Geocoding - Manually trigger the geocoding search of an Geocoded Address item.

Execute

• Download - Downloads one or multiple files.

• Execute JavaScript Code - Enables you to define or call custom, page specific JavaScript code to use within the dynamic action framework. If you are defining JavaScript code that is specific to just one page, you can use the page-level attribute Function and Global Variable Declaration to define this. Functions and variables defined there can then be referenced from this action.

• Execute Server-side Code - Executes code on the server.

  Tip: Enable the Show Processing attribute to display a wait spinner automatically for long-running PL/SQL code. To learn more, see Page Designer help.

• Invoke Interactive Report Dialog - Invoke Interactive Report Dialog triggers a tailored dialog based on the selected action, allowing users to customize reports by choosing columns, applying filters, highlighting data, and more..

• Print Report - Prints a Report Query.

Miscellaneous

• Cancel Event - Cancels the current event.

• Get Current Position - Triggers the device to return its current position. The device will ask permission to first time users.

• Share - Share the current page of this application, a different URL or files with other applications.

Navigation

• Cancel Event - Cancels the current event.

• Cancel Dialog - Cancels the current dialog page.

• Submit Page - Submits the page.

Notification

• Alert - Displays an alert message, with a single Ok button. Use to display information that must be responded to, by pressing the button, but continues executing the event.

• Clear Errors - Clear errors displayed on the page.

• Confirm - Displays a confirmation dialog, with Cancel and Confirm buttons. If the user chooses Cancel then the proceeding actions are not executed and the current event is canceled.

• Show Success Message - Displays a success message on the page.

• Show Error Message - Displays an error message on the page.

Style

• Add Class - Adds one or more CSS classes to the affected elements.

• Remove Class - Removes one or more CSS classes from the affected elements.

• Set Style - Sets a style (CSS) property to the affected elements.