How to create oracle APEX plugins

Oracle APEX (Application Express) plugins are custom components that can be added to APEX pages to extend the functionality of the application. To create an APEX plugin, you will need to have an understanding of HTML, CSS, JavaScript, and PL/SQL. Here are the general steps to create an APEX plugin:

Create a new plugin in the APEX builder by going to Shared Components > Plugins.
Define the plugin attributes, such as the name, type and others.
Create the PL/SQL package that will contain the plugin’s functions and procedures.
Create the plugin’s JavaScript and CSS files.
Add the plugin to a page by going to the page’s properties and selecting the plugin from the “Plugins” section.
Test the plugin and make any necessary adjustments.

Let’s start building APEX plugins

here is an example of creating a simple APEX plugin that adds a button to a page and displays an alert message when the button is clicked:

Create a new plugin in the APEX builder by going to Shared Components > Plugins,
and clicking on the “Create” button. Fill out the form, such as the name and type of the plugin.
Enter name, for example, “Sample Sweet Alert“
Enter Internal Name
Select Type as Dynamic Action
Create the PL/SQL package that will contain the plugin’s functions and procedures.

Copy Code

CREATE OR REPLACE PACKAGE my_plugin
AS
   FUNCTION render_fn (p_dynamic_action   IN apex_plugin.t_dynamic_action,
                       p_plugin           IN apex_plugin.t_plugin)
      RETURN apex_plugin.t_dynamic_action_render_result;
END my_plugin;
/

Create the package body:

Copy Code

create or replace PACKAGE BODY my_plugin
AS
   FUNCTION render_fn (p_dynamic_action   IN apex_plugin.t_dynamic_action,
                       p_plugin           IN apex_plugin.t_plugin)
      RETURN apex_plugin.t_dynamic_action_render_result
   AS
      l_result   apex_plugin.t_dynamic_action_render_result;
   BEGIN
    APEX_JAVASCRIPT.ADD_LIBRARY(
        P_NAME        => 'js',
        P_DIRECTORY   => P_PLUGIN.FILE_PREFIX,
        P_VERSION     => NULL,
        P_KEY         => 'anything'
    );

   APEX_CSS.ADD_FILE(
        P_NAME        => 'css',
        P_DIRECTORY   => P_PLUGIN.FILE_PREFIX,
        P_VERSION     => NULL,
        P_KEY         => 'ssss'
    );
    l_RESULT.JAVASCRIPT_FUNCTION   := 'my_plugin.initialize';
    l_result.attribute_01          := p_dynamic_action.attribute_01;
    l_result.attribute_02          := p_dynamic_action.attribute_02;
    l_result.attribute_03          := p_dynamic_action.attribute_03;

      RETURN l_result;
   END render_fn;
END my_plugin;

Create the plugin’s JavaScript file. This file will contain the JavaScript code that will be executed when the button is clicked.

Copy Code

var my_plugin = {
    initialize:function(){
    "use strict";
    
    var da=this;
    apex.debug.log('my_plugin.initialize',da);
    var message = da.action.attribute01;
    var title = da.action.attribute02;
    var icon = da.action.attribute03;
    console.log(message);
    
    function alert_fn (p_message){
        // swal(title, p_message); 
        swal({
            title: title,
            text: p_message,
            icon: icon,
            });

    }

    alert_fn(message);
    }
}

Let’s invoke the external JS API. Sweet Alerts
Refer to the API link to Plugin JS
Add the plugin to a page by going to the page’s properties and selecting the plugin from the “Plugins” section.

Let’s try to use it on the page.

Demo

Let’s start building APEX plugins

Why plugins?