JavaScript In Oracle APEX (Client Side)

In this article, I want to discuss this question

Where can we use JavaScript in Oracle APEX on the client side?

I recommend watching the video on my YouTube channel (www.youtube.com/@LidaGholizadeh_ORACLE_GIS) for more details about this article!

1. Dynamic Actions

Dynamic Actions in Oracle APEX support predefined JavaScript events, such as Click, Mouse Enter, and more. 

You can also define Custom JavaScript Events for specialized use cases when you want to do something that predefined Events can not handle.To implement this type of Dynamic Action, you need to create two separate Dynamic Actions:

1. Defining the Custom Event
2. Triggering the Custom Event

 For Defining the Custom Event set the Event of DA to custom and set a name for the Custom Event for example My_Custom_DA

Here Selection Type determines which elements or scope the custom event applies to and you have these option

• Item(s): Triggered by one or more page items.
• Button: Triggered by a button.
• Region: Triggered by a region.
• Column(s): Triggered by one or more columns.
• jQuery Selector: Triggered by elements selected using a jQuery selector.
• JavaScript Expression: Triggered by JavaScript Expression to be evaluated to return a single DOM object 

TIP: If you select JavaScript Expression as Selection Type, you should enter a JavaScript Expression to be evaluated to return a single DOM object for example document that Returns a reference to the browser's document DOM object and the custom event will be available globally across the document.

Now you created your Custom Event. To use that you need to run a JavaScript to trigger this event.

for example, create a button and then create a DA for that to run a JavaScript for triggering your Custom Evenet.

     apex.event.trigger(document, 'My_Custom_DA');

   For more Detail about Custom Dynamic Actin read the below article:

     https://lidagholizadeh.blogspot.com/2024/12/custom-javascript-event-of-dynamic.html

2. Page Attributes

You can embed JavaScript in the JavaScript Initialization Code section of a page. This allows you to set up code that runs as the page loads.

function myFunction() {

  alert('JS In Page Attribute');

}

3. JavaScript in Regions

JavaScript can be embedded in regions by setting the region type to Static Content (HTML) or PL/SQL Dynamic Content.

•  For Static Content Region

  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      alert('JavaScript in a Region!');
    });
  </script>
  

• For PL/SQL Dynamic Content Region

  
  declare
    cmd clob;
  begin
    cmd := '
    <script>
      document.getElementById("DynamicContent").addEventListener("click", function() {
        alert("JavaScript in PL/SQL!");
        document.getElementById("DynamicContent").style.backgroundColor = "black";
      });
    </script>';
    return cmd;
  end;
  
  

4. Interactive Grids

JavaScript can be used to customize Interactive Grids through the JavaScript Initialization Code section. This allows advanced customization of the Interactive Grid appearance, features, and behavior including toolbar, menus, and actions. by using APEX JavaScript API you can have this customization.

https://docs.oracle.com/en/database/oracle/apex/24.1/aexjs/

      function( options ) {

           var toolbar = apex.util.getNestedObject( options, "toolbar" );

          toolbar.actionMenu = false; 

         return options; 

}

5. APEX Items

In Custom Attributes of Items you can write HTML and wherever you have HTML you can write javascript code.you can use HTML events based on your Item for example for a textfield you can search about Input events in HTML

oninput="this.style.backgroundColor = 'red';

onfocus="this.style.backgroundColor = 'red';" 

6. Charts

In chart and attribute, there is Initialization JavaScript Function that you can write some javascript code.in APEX chart regions JavaScript charting library of Oracle JET is used.You can use Oracle JET API to modify some chart properties .

To use Oracle JET API for your chart you need two things: 

https://www.oracle.com/webfolder/technetwork/jet/jsdocs/index.html?

function(options) {

  

    options.xAxis = {

        title: "Categories",

        titleStyle: { fontSize: "14px", color: "#333" },

        tickLabel: { fontSize: "12px", color: "#555" },

        scale: "linear" // Options: 'linear', 'log'

    };

    options.yAxis = {

        title: "Values",

        titleStyle: { fontSize: "14px", color: "#333" },

        tickLabel: { fontSize: "12px", color: "#555" }

    };

    options.legend = {

       backgroundColor:"#e8f1f4",

       symbolWidth:"25",

       borderColor:"#dd5252",

       maxSize:"200",

       symbolHeight:"25",

     

    };

    options.plotArea = {

        backgroundColor: "#f4f4f4",

        borderColor: "#7f8c8d",

        borderWidth: 2

    };

 

    return options;

}