HOW DO I Implement the "Dynamic JS" Button

Oracle APEX provides a low-code environment that allows you to integrate custom JavaScript actions with button clicks for dynamic and responsive user interfaces. The "Dynamic JS" button is a button that doesn't submit the page, but instead triggers JavaScript directly to control UI behavior, manipulate data, or call Ajax processes. This is ideal for tasks like showing spinners, displaying modals, dynamically changing regions, or making non-submitting updates. In this blog, you’ll learn how to create a button that executes JavaScript dynamically in Oracle APEX.How to Implement a Dynamic JS Button in Oracle APEX

1. Create the Button

   • Open your page in Page Designer

   • Add a Button to your desired region

   • Set Action to Defined by Dynamic Action

   • Give the button a Static ID (e.g., BTN_DYNAMIC_JS) if needed for advanced referencing

2. Create a Dynamic Action for the Button

   • Under the Dynamic Actions section, click Create

   • Event: Click

   • Selection Type: Button

   • Button: Select your "Dynamic JS" button

   • Add a True Action:

     • Action: Execute JavaScript Code

     • Example JavaScript:

       apex.message.alert("Dynamic JavaScript executed!");
       

3. Customize the JavaScript Logic
   You can extend the JavaScript to:

   • Show or hide a region

   • Disable/enable form items

   • Trigger Ajax callbacks using apex.server.process

   • Show spinners or loading icons

   • Interact with jQuery selectors (e.g., $('#P1_NAME').val('Test');)

4. Use with Conditional Logic or Additional Dynamic Actions
   Add conditions or multiple true actions to make the button respond to different states (e.g., only run if an item has a value).

The Dynamic JS button updates the text fields dynamically using JavaScript.

Implementation Steps

1. Set the Button Action to Defined by Dynamic Action.

2. Create a Dynamic Action with the following attributes: 

• Event: Click

• Action: Execute JavaScript Code

• JavaScript Code:

$s("P1_FNAME", "John");

$s("P1_LNAME", "Doe");

This script sets the values of the text fields to "John" and "Doe" when the button is clicked.

 

Best Practices for Dynamic JS Buttons

• Always label buttons clearly so users know what to expect

• Keep JavaScript modular and reusable—consider defining functions in the page’s JavaScript section

• Use the browser console to debug your scripts

• Don’t perform sensitive logic in JavaScript—use server-side validation where needed

• Combine with APEX apex.message, apex.item, and apex.server.process APIs for full capability

• Disable buttons or show a spinner during long-running JS processes to enhance UX

Oracle APEX Documentation Links

• Using Dynamic Actions

• APEX JavaScript API Reference

• apex.server.process for Ajax

Conclusion

The "Dynamic JS" button in Oracle APEX is a powerful tool that lets you extend interactivity without submitting the page. By attaching JavaScript logic through dynamic actions, you gain full control over UI behavior and client-side processing. Whether it’s showing a message, updating fields, or calling a server process via Ajax, dynamic JavaScript buttons enable a more responsive and modern user experience in APEX applications.