This post is meant as inspiration: the steps and the example below are a pattern you can reuse for any print template you need. Use it as a starting point and adapt it to your own documents.

The three pieces of the solution

1. HTML

Build the document server-side (e.g. in PL/SQL) as a single container — for example a div with a class like invoice-doc — and give it a clear structure: title, metadata, parties, table of lines, totals, notes. You can design or draft this HTML with AI: ask it to "generate a simple invoice HTML with From/To, a lines table, and totals," then adapt the markup and plug in your real data in PL/SQL. You keep full control and there is no need to be a designer.

2. Dynamic region

Use one region of type PL/SQL Dynamic Content. It calls a function (or block) that returns your HTML; the region outputs it so the page renders the HTML. The region has no title or uses a minimal template so the page is just your document plus a Print button.

3. CSS

Use one CSS block (or file) with two roles:

• Layout: Styles for the document container (max-width, font, spacing, tables) so it looks good on screen.

• Print: A @media print block that hides everything on the page, then shows only your document container and its children. The browser print dialog then sees a clean page with no APEX chrome (header, nav, modal frame, buttons). Users can print or choose "Save as PDF" from the browser.

Minimal example

PL/SQL: return a tiny document

Build a small HTML fragment and return it in your Dynamic Content region so the page displays it as HTML:

declare
  l_html clob;
begin
  l_html := '<div class="invoice-doc">'
         || '<h1>Invoice</h1>'
         || '<p><strong>Number: 2026-001</strong></p>'
         || '<p>Total: $100.00</p>'
         || '</div>';
  -- In the PL/SQL Dynamic Content region, output l_html so the page renders it as HTML.
end;
/

The complete PL/SQL example (function, region source, and full document structure) is in the repository: invg_invoice_api.pks and invg_invoice_api.pkb.

CSS: layout + print

The print CSS gives the document layout on screen and a @media print block that hides the rest of the page and shows only your document container, so the browser print dialog sees a clean page.

Import into APEX: add the CSS to your application (e.g. upload as a Static Application File or paste into Page > CSS > Inline) and reference it on the page so it loads for the print preview.

Full file: invg_invoice_print.css.

JavaScript: trigger print

Add a button (e.g. in the dialog footer) with a Dynamic Action that runs:

function invgPrintInvoice() {
  window.print();
}

Use a class like no-print on the button and hide it in @media print if you do not want it on the printed page.

Full example and app

All code for this post is in the repository: 5_easy_print_custom_html (package spec and body, CSS, and images). The full application will be shared later in a separate post.

Why this approach

• No extra licensing — You use only Oracle APEX and the browser. No reporting server or PDF library required.

• Save as PDF is built in — Users can choose "Save as PDF" or "Print to PDF" from the browser’s print dialog.

• You own the template — The HTML and CSS are yours; you can change the layout or reuse the pattern for any document (receipt, report, delivery note, quote).

• AI can help — You can use AI to draft the initial HTML structure (e.g. invoice layout, table markup), then wire it to your data in PL/SQL and adjust the styles as needed.

With a small amount of HTML, one dynamic region, and a focused print CSS, you can have print-ready pages at zero cost.

#oracle-apex #apex #apexworld #apex-tips #oracle #orclapex #printing #pdf

In this post, we'll explore the APEX Hierarchy Visualizer, a Template Component plugin designed to render nested data with elegant indentation and multiple visual styles.

(Transforming raw CONNECT BY data into a clean, visual hierarchy)

Anatomy of the "APEX Hierarchy Visualizer" Plugin

The power of this plugin lies in its ability to automatically handle indentation and node types (parent vs. leaf) based on standard SQL hierarchical queries.

1. Dynamic Indentation Styles

The plugin isn't limited to just adding spaces. You can choose from several Indent Style options to match your UI requirements:

• Folder/File Icons: The classic view using Font Awesome icons (orange folders for parents, gray files for leaves).
• Chevrons: A modern, minimalist look with directional arrows indicating depth.
• Solid & Dotted Lines: Provides a "stretched" visual connector from the start of the row to the label.
• L-Steps (└─): A clean ASCII-style branching visualization.
• Spaces Only: For when you just need the structural alignment without icons.

2. Custom Attributes for Full Control

Configurable directly in the Page Designer, these attributes allow you to tailor the visualization:

• Hierarchy Level Column: Maps to the LEVEL pseudo-column from your query.
• Is Leaf Column: Maps to CONNECT_BY_ISLEAF to distinguish between folders and items.
• Indentation (px): Precisely control how many pixels each level should shift (default is 20px).
• Node Colors: Override default colors for Parent and Leaf nodes using the integrated Color Picker.

How to Use

Setting up the hierarchy visualizer in your application is a straightforward process:

1. Prepare Your Data: Use a CONNECT BY or Recursive CTE query to generate the hierarchy, ensuring you include LEVEL and CONNECT_BY_ISLEAF. _Ref: demo_hierarchical_data_table.sql_

2. Add the Plugin: Import the plugin SQL file and the corresponding CSS style.

   • Download CSS
   • Download Plugin SQL

3. Assign the Type: Change your report column type to APEX Hierarchy Visualizer.

4. Map Attributes: In the column attributes, select the corresponding source columns for Level, Is Leaf, and the Label you want to display.

5. Fine-tune: Choose your preferred Indent Style and adjust the Indent Step to fit your design.

(Example of plugin configuration in Page Designer)

Resources

• Full Repository: Access the source code here
• Plugin Source: Plugin Folder
• Manual Config Guide: Read the implementation details
• SQL Example: Sample hierarchical query

In this post, we'll see how to "display colors" using a plugin. The goal is to go from showing a simple hex code (e.g., #FF4436) to a rich visual component with multiple customization options—dot, radio, square, badge, pill, etc.—usable in Interactive Reports.

(This is the final result: a single plugin, multiple visual representations)

Anatomy of Our "APEX Color Visualizer" Plugin

For this example, we have designed a plugin that supports a large number of visual variations controlled by custom attributes.

1. Multiple Display Styles

The core of the plugin allows you to choose how to render the data using the STYLE attribute:

• Pill: Ideal for prominent statuses.
• Badge: Subtle, light background with colored border.
• Radio / Dot: Minimalist indicators alongside the text.
• Square: Palette-style color swatches.

2. Custom Attributes

What makes this plugin truly useful is its flexibility. We have defined attributes that can be configured directly from the Page Designer:

• Size: Full size control (Extra Small, Small, Medium, Large, Extra Large).
• Show Text: Option to hide the Hex code and leave only the visual indicator.
• Shadow & Border: Boolean attributes to add depth or defined borders.
• Position: Flexible alignment of the indicator relative to the text (left, right, top, bottom).

You can view the full styles here: apex_color_visualizer.css

How to Use

Implementing it in your applications is simple, follow these steps:

1. Create Your Report: Create an Interactive Report or Classic Report that contains a column with hex color codes.
2. Select the Column: In Page Designer, select the color column.
3. Change the Type: Change the column type to APEX Color Visualizer.
4. Configure: Adjust the attributes (Style, Size, Shadow, etc.) according to your needs.

(Plugin configuration panel in Page Designer)

Resources

• Full Repository: Access the source code here
• Plugin Installation: template_component_plugin_apex_color_visualizer.sql
• CSS Styles: apex_color_visualizer.css

In this post, we'll explore how to create a custom template component plugin that automatically displays green checkmarks (✓) for "Y" values and red crosses (✗) for "N" values in your APEX reports, providing instant visual feedback to users.

Complete Implementation on GitHub - Full working code examples

What is a Template Component Plugin?

A Template Component Plugin in Oracle APEX is a reusable UI component that can be applied to report columns, regions, or other UI elements. It uses APEX's declarative template syntax to transform data values into custom HTML output, allowing developers to create consistent, branded user interfaces without writing complex JavaScript.

This implementation creates a template component plugin that transforms Y/N values into intuitive visual indicators:

• ✅ Green checkmark (✓) for "Y" values - indicating active, enabled, or positive states
• ❌ Red cross (✗) for "N" values - indicating inactive, disabled, or negative states

Visual Result

The plugin displays values as shown in the following table:

Installation Instructions

Step 1: Install the CSS File

First, upload the y_n.css file as a workspace static file at css/y_n.css. The file contains the following styles:

.icon-check {
  color: #10b981;
  font-size: 0.9rem;
}
.icon-x {
  color: #ef4444;
  font-size: 0.9rem;
}

Step 2: Install the Template Component Plugin

Install the template component plugin by running the template_component_plugin_y_n.sql script:

-- Run the plugin installation script
@template_component_plugin_y_n.sql

This creates a plugin named Y_N that can be used as a column template in Interactive Reports.

Usage in Interactive Reports

Applying the Plugin to a Column

1. Navigate to your Interactive Report in Page Designer
2. Select the column you want to format (e.g., active_yn)
3. In the column properties, go to Column Formatting → Template
4. Select Y_N from the Template Component dropdown
5. In the Value attribute, select the column containing your Y/N value (typically the same column)

Example

After applying the Y_N template component to the active_yn column, the values will automatically display as green checkmarks (✓) for "Y" and red crosses (✗) for "N".

Implementation Details

Template Component Structure

The plugin uses APEX's declarative template syntax to conditionally render icons based on the column value: template_component_plugin_y_n.sql

{if APEX$IS_LAZY_LOADING/}
  <div>#VALUE#</div>

{else/}

  {if ?VALUE/}

      {case VALUE/}
        {when Y/} <span class="icon-check" title="#VALUE#">✓</span>

        {when N/} <span class="icon-x">✗</span>
        {otherwise/}
      {endcase/}

  {endif/}


{endif/}

CSS Styling

The CSS file provides color coding for immediate visual feedback:

• Green (#10b981): Tailwind's emerald-500 color for positive/active states
• Red (#ef4444): Tailwind's red-500 color for negative/inactive states
• Font Size (0.9rem): Slightly smaller than default text for better proportion in tables

Customization Options

Changing Colors

To modify the colors, edit the css/y_n.css file:

.icon-check {
  color: #22c55e;  /* Change to your preferred green */
  font-size: 0.9rem;
}
.icon-x {
  color: #dc2626;  /* Change to your preferred red */
  font-size: 0.9rem;
}

Files in this post:

• template_component_plugin_y_n.sql - Plugin installation script
• y_n.css - CSS styling file
• plugin_y_n_en.md - This blog post (English)
• plugin_y_n_es.md - Blog post (Spanish)

• GitHub: Full source code and documentation

The Problem: console.log

When working with JavaScript, we usually use console.log for debugging. However, it can generate so much content in the console that it becomes difficult to manage, and practically impossible to use in production.

• A user reports an issue, but you can't reproduce it
• You see the error in DevTools, but users in production don't have it open
• No audit trail for user actions
• No performance metrics for slow operations
• Sensitive data might accidentally get logged

JS-Logger, Main Features

• Color configuration for console
• logger.logServer, to log to the database using PL/SQL Logger
• Automatic data masking for sensitive fields
• Performance timing to find bottlenecks
• Modules to know where the console.log was launched from
• Configuration according to environment DEV, UAT, PROD

How to Get Started

Step 1: Load the Files

Load the files into your APEX application:

#WORKSPACE_FILES#js/logger-config.js
#WORKSPACE_FILES#js/logger.js

Step 2: Usage

// Basic usage
namespace.logger.log('Application started', 'AppMain');

// With data
namespace.logger.log('User action', 'UI', {
  action: 'button_click',
  pageId: apex.env.APP_PAGE_ID
});

// For production events
namespace.logger.logServer('Payment processed', 'Payments', {
  orderId: 'ORD-123',
  amount: 99.99
});

Advanced Examples

1. Three Log Levels with Colors

The logger provides three log levels that automatically output in different colors:

Information (Blue)

namespace.logger.log('User logged in', 'Auth', { userId: 123 });

Warning (Orange)

namespace.logger.warning('API slow', 'Network', { responseTime: 3500 });

Error (Red)

namespace.logger.error('Validation failed', 'Form', { field: 'email' });

2. Module-Scoped Loggers

Create a logger for your module with persistent context. This is useful when building other JS libraries and you want to integrate it:

// Create a module logger
var logger = namespace.logger.createModuleLogger('PaymentModule');

// Set context that applies to all logs from this module
logger.setExtra({ version: '2.0', feature: 'checkout' });

// Now all logs automatically include the context
logger.log('Processing payment', { amount: 99.99 });
logger.error('Payment failed', { reason: 'insufficient_funds' });

// Clear context when done
logger.clearExtra();

3. Console vs Server Logging

Three logging modes for different needs:

Console-only (development)

namespace.logger.log('Debug info', 'MyModule', { data: 'value' });

Console + Database (production)

namespace.logger.logServer('Important event', 'Business', { 
  orderId: 'ORD-123',
  action: 'order_shipped' 
});

Console + Database with options (manual control per log)

namespace.logger.log('User completed checkout', 'Ecommerce', {
  orderId: 'ORD-123',
  total: 99.99
}, {
  sendToServer: true  // Enable server sending
});

4. Automatic Data Masking

Security is built-in. Sensitive fields are automatically masked:

namespace.logger.log('Login attempt', 'Auth', {
  username: 'john.doe',
  password: 'secret123',  // Automatically becomes: ***MASKED***
  token: 'abc123'         // Automatically becomes: ***MASKED***
});

5. Performance Timing

Measure how long operations take:

// Start timing
namespace.logger.timeStart('page-load');

// ... do work ...

// Stop and log elapsed time
var elapsed = namespace.logger.timeStop('page-load', 'Performance');
// Output: "page-load completed in 125.43ms"

Configuration and Customization

Turning Off and Customizing Output

To turn off logging completely we use LEVEL set to OFF. Then depending on what we need we can use:

• INFORMATION: shows everything
• WARNING: shows warnings and errors
• ERROR: only errors
• OFF: turns off all console logs

To return to the initial configuration use resetLevel() or set level: 'INFORMATION'.

namespace.loggerConfig.configure({
  level: 'OFF',  // OFF | ERROR | WARNING | INFORMATION
});

// Reset the level according to the main configuration
namespace.loggerConfig.resetLevel();


// Development: detailed console output
var devConfig = namespace.loggerConfig.getEnvConfig('development');
namespace.loggerConfig.configure(devConfig);

// Production: errors only, with server logging
var prodConfig = namespace.loggerConfig.getEnvConfig('production');
namespace.loggerConfig.configure(prodConfig);

Other Configuration Values

var DEFAULT_CONFIG = {
  // Logging behavior
  level:                  'INFORMATION',        // Console log level - values: OFF, ERROR, WARNING, INFORMATION
  enableServer:           true,                 // Enable server logging (database storage)

  // Server logging configuration
  serverProcessName:     'JS_LOGGER',          // APEX process name for server logging
  retryCount:             1,                    // Maximum number of retry attempts
  retryAttemptInitial:    0,                    // Initial retry attempt counter
  retryDelayBase:         1000,                 // Base delay in milliseconds

  // Default values
  defaultModuleName:      'JS_LOGGER',          // Default module name
  defaultUserName:        'UNKNOWN',            // Default user name

  // Security and data handling
  enableDataMasking:      true,                 // Enable masking of sensitive fields
  sensitiveFields:        ['password', 'token', 'ssn'],  // Fields to mask
  maxDataSize:            10000,                // Maximum data size in bytes
  maxErrorStringLength:    100,                  // Maximum error string length

  // Timing configuration
  timingDecimalPlaces:    2                     // Decimal places for timing
};

Learn More

• Examples: 5 focused examples covering all features
• Demo: Complete payment module implementation
• GitHub: Full source code and documentation
• Video Video with short explanatión.

🔗 Live Demo

Overview of Methods

• Method 1: jsPDF with Fixed Dimensions - Simple, predictable PDF generation with predefined page sizes
• Method 2: jsPDF with Dynamic Scaling - Intelligent content adaptation with automatic orientation and scaling
• Method 3: Browser Print Method - Leverages browser's native PDF generation capabilities

Database Setup

First, create the table to store HTML documents. For the complete DDL script, see html_tmp_table.sql.

Required Libraries

Add these libraries to your APEX page (Page > JavaScript > File URLs):

https://github.com/Aftorres02/blog_app_examples/tree/master/post_2025/18_tmp_html_to_pdf_dow/libs

Library References:

• jsPDF Documentation: https://github.com/parallax/jsPDF
• html2canvas Documentation: https://github.com/niklasvh/html2canvas
• Oracle APEX Documentation: https://docs.oracle.com/en/database/oracle/application-express/

APEX Process

Create an AJAX process named GET_HTML_CONTENT:

declare
    l_html_content clob;
    l_document_id number;
begin
    l_document_id := apex_application.g_x01;

    select html_content, document_name
    into l_html_content, :P1210_DOCUMENT_NAME
    from html_documents
    where id = l_document_id
    and active_yn = 'Y';

    apex_json.open_object;
    apex_json.write('html_content', l_html_content);
    apex_json.write('document_name', :P1210_DOCUMENT_NAME);
    apex_json.close_object;

exception
    when no_data_found then
        apex_json.open_object;
        apex_json.write('error', 'Document not found');
        apex_json.close_object;
end;

Method 1: jsPDF with Fixed Dimensions

What it does: Creates a PDF with predefined dimensions (900x630 points) and converts HTML content directly to PDF format. This method provides good control over page size but may not automatically adjust to content dimensions.

apex.server.process(
  "GET_HTML_CONTENT",
  {
    x01: apex.item("P1210_DOCUMENT_ID").getValue(),
  },
  {
    success: function (data) {
      var doc = new jspdf.jsPDF("p", "pt", [900, 630]);

      doc.html(data.html_content, {
        callback: function (doc) {
          if (doc.getNumberOfPages() >= 2) {
            doc.deletePage(2);
          }
          var filename = data.document_name;
          doc.save(filename + ".pdf");
        },

        // Set the rendering starting point and size
        x: 0,
        y: 0,
        margin: 20,
        width: 590, // FULL width of the page in points
        windowWidth: 590, // Optional: helps html2canvas understand layout

        html2canvas: {
          useCORS: true,
          allowTaint: true,
          scale: 1, // Adjust this for quality vs performance
        },
      });
    },
    error: function () {
      alert("Error loading document content");
    },
  }
);

Method 2: jsPDF with Dynamic Orientation and Scaling

What it does: Automatically detects content dimensions and chooses the best orientation (portrait/landscape) and scaling factor to fit the content perfectly within the PDF page. This method provides the most intelligent content adaptation.

apex.server.process(
  "GET_HTML_CONTENT",
  {
    x01: apex.item("P1210_DOCUMENT_ID").getValue(),
  },
  {
    success: function (data) {
      // Create a hidden container dynamically
      let tempContainer = document.createElement("div");
      tempContainer.id = "htmlContentHidden";
      document.body.appendChild(tempContainer);

      // Insert HTML content
      tempContainer.innerHTML = data.html_content;

      // Measure content dimensions
      const contentWidth = tempContainer.scrollWidth;
      const contentHeight = tempContainer.scrollHeight;

      // Decide orientation based on aspect ratio
      let orientation = contentWidth > contentHeight ? "l" : "p";

      // Init jsPDF with dynamic orientation
      const { jsPDF } = window.jspdf;
      let doc = new jsPDF(orientation, "pt", "a4");

      // Get actual page dimensions from jsPDF
      const pageWidth = doc.internal.pageSize.getWidth();
      const pageHeight = doc.internal.pageSize.getHeight();

      // Calculate scale so content fits into page width (max = 1)
      const scaleFactor = Math.min((pageWidth - 40) / contentWidth, 1);

      // Generate PDF
      doc.html(tempContainer, {
        callback: function (doc) {
          doc.save("dynamic_fit.pdf");
          // Clean up
          document.body.removeChild(tempContainer);
        },
        x: 20,
        y: 20,
        width: pageWidth - 40, // usable width with margins
        windowWidth: contentWidth, // original HTML width
        html2canvas: {
          scale: scaleFactor,
          useCORS: true,
          allowTaint: true,
        },
      });
    },
    error: function () {
      alert("Error loading document content");
    },
  }
);

Method 3: Browser Print Method

What it does: Opens the HTML content in a new browser window and triggers the browser's native print dialog, allowing users to save as PDF using their browser's built-in PDF functionality. This method leverages the browser's native PDF generation capabilities.

apex.server.process(
  "GET_HTML_CONTENT",
  {
    x01: apex.item("P1210_DOCUMENT_ID").getValue(),
  },
  {
    success: function (data) {
      var printWindow = window.open('', '_blank', 'width=800,height=600');
      printWindow.document.write('<!DOCTYPE html>');
      printWindow.document.write('<html><head><title>Document</title>');
      printWindow.document.write('<style>body{font-family:Arial,sans-serif;margin:20px;}</style>');
      printWindow.document.write('</head><body>');
      printWindow.document.write(data.html_content);
      printWindow.document.write('</body></html>');
      printWindow.document.close();

      setTimeout(function() {
          printWindow.print();
          setTimeout(function() {
              printWindow.close();
          }, 1000);
      }, 500);
    },
    error: function () {
      alert("Error loading document content");
    },
  }
);

Comparison of Methods

]

Para esto usaremos la famosa librería de JavaScript html2canvas.

Veremos dos formas de agregar esta librería a APEX, aunque particularmente recomendare la segunda.

La primera forma es agregando el CDN (url) de esta librería https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js directamente a la APEX.

Y la segunda forma que recomiendo, es descargar el archivo JS desde la URL antes mencionada y cargarlo directamente en los static files de APEX

Luego usaremos esa ruta directamente en APEX, con ello evitamos la dependencia de un servidor externo en caso exista o no el link.

Finalmente, para el ejemplo, demo que la pueden encontrar aquí

Hemos creado un reporte y un botón, el botón tendrá una acción dinámica para ejecutar el siguiente JavaScript

Lo importante aquí es definir el ID de la región ah capturar, o en su defecto si queremos capturar toda la pantalla, solo sería cambio del selector.

Y el otro punto es el nombre y la descarga.

  // Specified the region to print
  // this example can be region report or any region
  var region = document.getElementById('employeeReport');
  // or can be all document
  var documentBod = document.body;

  // Use html2canvas to capture the region
  html2canvas(region).then(function(canvas) {
  // html2canvas(documentBod).then(function(canvas) {

    // Convierte el canvas a una URL de datos en formato PNG
    var imgData = canvas.toDataURL("image/png");

    // create a temporary link for download the image
    var link = document.createElement('a');
    link.href = imgData;

    var imageCaptureName = 'captura.png';
    link.download = imageCaptureName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }).catch(function(error) {
    console.error('Error capturando la región:', error);
  });

En este ejemplo detallaremos los siguientes puntos, usando Interactive Grids:

• Como capturar el onChange o cambio de valor en una celda.
• Obtener la celda donde se ejecutó el cambio, así como el valor antiguo y nuevo.
• Calcular en base a la celda seleccionada valores de otras columnas.
• Asignación de valores a una fila y columna especifica.

Todo el requerimientos y acciones de logro en un bloque de dos funciones JavaScript, en donde usamos el modelo, un listener para escuchar los eventos de cambio de valor y así mismo un loop para recorrer las filas , sumar y asignar a la celda correspondiente.

La demo de este ejemplo lo pueden visualizar en... DEMO

Primero creamos un InteractiveGrid y le asignamos un ID en mi caso employeesIG.

Lo siguiente será agregar el siguiente código JavaScript en la sección de la página, Function and Global Variable Declaration

var igGrid$ = $("#employeesIG");
igGrid$.on("interactivegridviewmodelcreate", function(event, ui) {

  var grid = apex.region("employeesIG").widget().interactiveGrid("getViews", "grid");
  var model = grid.model;

  //var model = ui.model; // we can also use this definnnnnn
  var model = model;
  //  console.log('ui',ui);

    if (ui.viewId === "grid") {

        sid = model.subscribe( {

          onChange: function(type, change) {

            if (type === 'set' &&  (change.field == 'BUDGET' ) ) {

                var record = model.getRecord(change.recordId), // Usar change.recordId
                    fieldName = change.field,
                    newValue = model.getValue(record, fieldName);
                    parentProjectId = model.getValue(record, 'PARENT_PROJECT_ID');
                    console.log('change',change);

                    lastRecord = record;
                //console.log('Celda cambiada en la columna:', fieldName,'oldValue', change.oldValue, 'Nuevo Valor:', newValue);
                if(parentProjectId){
                  // the timeout important, this is a bug but not document 100%
                  setTimeout(function() {
                    calculateTotals(model,parentProjectId);
                  },1);
                }
            }
            // console.log(15, ui.viewId, type, change, event,ui);
          }

        });

    }

});


function calculateTotals(model, selectedParentId){

  let sumParentProject = 0;

  model.forEach(function(fetchRecord, index, idx) {


    // save the parent ID of the curren fetchRow
    let parentProjectId = model.getValue(fetchRecord,'PARENT_PROJECT_ID');
    // define the ID for get he parent id later
    let fetchSelectedID= model.getValue(fetchRecord,'ID');

    // sum all the records with the same parent ID
    if (selectedParentId == parentProjectId ){
      // get the current budget
      let budget = model.getValue(fetchRecord, 'BUDGET' );
      sumParentProject = Number(sumParentProject) + Number(budget);
    }

    // reuse the loop for search the parent record
    if (fetchSelectedID == selectedParentId) {
      parentRecord = fetchRecord;
    }
  });

  // cast to String to apply the changes on the view
  model.setValue(parentRecord, 'BUDGET' , sumParentProject.toString() );

  //console.log('this is the parent record', parentRecord);
  //console.log('the total for projectId(' + parentId + ') is', sumParentProject);

}

Y como resultado vemos que al cambiar el valor de la celda, este se replica en la celda padre.

Es por ello que existe el concepto de namespaces en Javascript, para poder mantener un orden.

Dejaré un ejemplo de como podriamos usar esto, ya sea creacion diferentes objectos y agregando funciones o directamente una funcion dentro de un submodul.

/*
Global Variables across all files
*/

var currentUser = 'ANGEL';


// This code simulates to be existing in a different file for example file called page1
// This example creates first an object and then the functions below  this object
var namespace = namespace || {};

/** ==========================================================================
* @module page 1
**/
namespace.page1 = {
  globalVarP1: 'This is a page 1',

  /** ==========================================================================

  * @function calculator
  * This could be usefully to separate different functionalities  in the same file or for organice better the code
  *
  * @example namespace.page1.calculator('Angel').sum(2,30)
  * @example namespace.page1.calculator('Angel').multi(2,30)
  * @example namespace.page1.calculator('Angel').description
  * @example namespace.page1.calculator('Angel') you could use this call for initialize some parameters for example
  *
  * @issue
  *
  * @author Angel
  * @created 5 May 2024
  * @return  return {
  *           description: "This function contains subFunctions to simulate a calculator",
  *           sum: sum,
  *           div: div,
  *           multi: multi,
  *          };
  **/
  calculator: function (fucntionGlobalVariable) {

    // private variables
    var internal_msg = "Calculator of page 1";

    // private functions
    var privateFunction = function () {
      return fucntionGlobalVariable + "/" + internal_msg;
    };

    // public functions
    var sum = function (a,b) {
      return privateFunction() + " - sum is: "
           + (a + b);
    };

    var div = function (a,b) {
      return privateFunction() + " - division is: "
           + (a / b);
    };

    var multi = function (a,b) {
      return privateFunction() + " - multiplication is: "
           + (a * b);
    };

    // Return things that is going to be public
    return {
      description: "This function contains subFunctions to simulate a calculator",
      sum: sum,
      div: div,
      multi: multi,
    };
  }
};


/**
==========================================================================
==========================================================================
**/

// This code simulate to be existing in a different file for example file called page2
// In this example we are creating the direct function, without an object

var namespace = namespace || {};

/**
* @module page 2
**/


  /** ==========================================================================

  * @function calculator
  * This could be usefully to separate different funcionalities in the same file or for organize better the code
  *
  * @example namespace.page2
  * @example namespace.page2.publicFunction()
  * @example namespace.page2.globalVarP2
  *
  * @issue
  *
  * @author Angel
  * @created Monday, 5 May 2024
  * @return  return {
  *            description: internal_msg,
  *            publicFunction: publicFunction,
  *            globalVarP2: globalVarP2,
  *          }
  **/
namespace.page2 = (function(namespace, $, undefined) {

  var globalVarP2 = 'This is a page 2';

  var internal_msg = "This is an internal message of page 2";

  var privateFunction = function () {
    return globalVarP2 + " / " + internal_msg;
  };
  var publicFunction = function () {
    return 'This is a public function with private function: ' + privateFunction();
  };

  return {
    description: internal_msg,
    publicFunction: publicFunction,
    globalVarP2: globalVarP2,
  };

})(namespace, apex.jQuery);

Aqui algunas referencias:

• javascript-namespace
• essential-js-namespacing
• javascript-namespaces-joseph-evans
• avoid-javascript-mess

Iremos de frente a los ejemplos, para ver un poco la teoría dejare algunos enlaces en la parte final, entendamos que ya tenemos un proceso ajax callback definido en nuestra página, en mi caso se llamará apex_ajax_call

Demo

Async / Await

var async_fnc_1 = async function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var async_fnc_2 = async function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  //throw new Error('Something went wrong.');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
          data.xx = 'new param just in case';
          //throw new Error(' custom error');
      }
  }
  );
}

var async_fnc_3 = async function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var fncError = function(dataError){
  console.log('error on promise' + dataError);
}

async function exec_calls(){
  var result1 = await async_fnc_1(2);
  console.log('call 1: ', result1);

  var result2 = await async_fnc_2(5);
  console.log('call 2: ', result2);
  console.log('print custom result: ', result2.xx);

  var result3 = await async_fnc_3(3);
  console.log('call 3: ', result3);
}

exec_calls();

Promise

var promise_1 = function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var promise_2 = function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  //throw new Error('Something went wrong.');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
          data.xx = 'new param just in case';
          //throw new Error(' custom error');
      }
  }
  );
}

var promise_3 = function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var fncError = function(dataError){
  console.log('error on promise' + dataError);
}

promise_1(3).then(
  function(data){
    console.log('result promise 1 / ',data.message);
    return promise_2(2);
  }
  , fncError
).then(
  function(data){
    console.log('result promise 2 / ',data);
    return promise_3(1);
  }
  , fncError
).then(
  function(data){
    console.log('result promise 3 / ',data.message); 
  }
  , fncError
)

Definicion del ejemplo

Código PlSql

declare
  l_param       number := apex_application.g_x01;
begin

  DBMS_SESSION.sleep(l_param);

  apex_json.open_object;
  apex_json.write('success',true);
  apex_json.write('message','sleep: ' || l_param || ' at: '|| LOCALTIMESTAMP);
  apex_json.close_object;

exception
  when others then
    apex_json.open_object;
    apex_json.write('success',false);
    apex_json.close_object;
end;

Referencias

• Javascript promises in apex
• Promesas, AJAX, PLSQL y Javascript
• Javascript async await
• Using apex.server.process for AJAX in Oracle APEX
• Apex.server.process

Como base principal tendremos una menu popup generado a través de una Lista estática del sharecomponents de APEX.

1) Creando el Popup Menu

1. Creamos una lista en APEX con el siguiente SQL. Si tú ya tienes una lista puedes pasar al paso de: Agregando un nuevo botón de acción.

with menu_test as (
  select 10 id, 'New'        as entry_text, '#' as entry_target, 'fa-file-o' as entry_image  from dual union all
  select 20 id, 'Open'       as entry_text, 'javascript:console.log(''test parent'')' as entry_target, 'fa-folder-open-o' as entry_image  from dual union all
  select 30 id, '---'        as entry_text, 'separator' as entry_target, '' as entry_image  from dual union all
  select 40 id, 'Exit'       as entry_text, '#' as entry_target, '' as entry_image  from dual union all
  select 50 id, 'Spreadsheet'as entry_text, '#' as entry_target, 'fa-file-excel-o' as entry_image  from dual union all
  select 60 id, 'Image'      as entry_text, '#' as entry_target, 'fa-file-image-o' as entry_image  from dual
)
select null
     , 'ID:'||id|| ' - ' || entry_text label
     , entry_target target
     , null is_current
     , entry_image image
     , 'width="20" height="20"' image_attrib
     , 'image_alt' image_alt
     , id a01 -- this place is for display the ID
  from menu_test

1. Ahora creas un botón y una región con la siguiente configuración.

Lo importante son los puntos marcados en rojo, ya que los IDs nos serviran de selector luego.

Agregando un nuevo botón de acción

Ahora para agregar un botón de forma dinámica nos apoyaremos de los siguientes blogs.

• Oracle APEX menu popup, Louis Moreaux

• Oracle JS Doc

• Custom menus

Este control soporta diferentes opciones entre ellas el evento,

Esto nos permite la manipulación del elemento antes de mostrarlo, una de las primeras cosas que haremos será agregar una nueva acción a la lista actual.

Para el ejemplo agregaremos el botón tipo= acción y label= Link Demo

// Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento
$( "#customized_menu" ).menu({

  // creamos un "listener" del evento beforeOpen
  beforeOpen: function( event, ui ) {

    // adicional console para ver la información que se tiene cuando se habre el menu
    console.log(event, ui);

    // condicional para verificar si el botón ya existe y no volverlo agregar
    // para este caso los IDs con muy importantes para diferenciarlos
    // El type, label, icon, action son totalmente personalizables de acuerdo a nuestras necesidades
    if ( !ui.menu.items.find(objeto => objeto.id === 'myIdDemo') ){
            ui.menu.items.push({id: 'myIdDemo'
                              , type: 'action'
                              , label: 'Link Demo'
                              , icon: 'fa-badge-check'
                              , action: function() {
                                  console.log('Click en el nuevo botón');
                                }
                              })
    }

  }

});

Para completar la demostración agregue un botón que usa una acción dinámica y ejecuta el javascript.

Muestra una alerta al finalizar

Y al probar el botón de acciones vemos como se agrego una nueva acción.

Modificando un atributo en todos los elementos

Solo como ejemplo podremos hacer algo asi, cambiar un solo atributo a todos los elementos.

• Revisar los comentarios del código siguiente ```js // Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento $( "#customized_menu" ).menu({

  // creamos un "listener" del evento beforeOpen beforeOpen: function( event, ui ) {

  // guardamos la colección de items para luego recorrer uno por uno var menuItems = ui.menu.items; menuItems = menuItems.map( function ( item ) { //por cada elemento cambiamos el icono a fa-bug item.icon = 'fa-bug'; // retornamos el item modificado return item; });

  }

});

![cambiar_todos_los_iconos]


### Modificando acciones específicas #1 (ubicadas por el ID)


Como podemos ver nuestro popup menu del ejemplo ya tiene un ID único, esto para poder encontrar de manera fácil cual elemento deseamos modificar.

Seleccionaremos un ID especifico y le cambiaremos el tipo, Icono, Label en on y en off


```js

// Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento
$( "#customized_menu" ).menu({
  // creamos un "listener" del evento beforeOpen
  beforeOpen: function( event, ui ) {

    // guardamos la coleccion de items para luego recorrer uno por uno
    var menuItems = ui.menu.items;
    menuItems = menuItems.map( function ( item ) {
      // buscamos si es el ID 40 y modificamos sus propiedades
      if (item.id == 40 ){
        item.label =  'Botón cambiado';
        item.icon  =  'fa-ban';
      }
      return item;
    });

    }

});

Modificando acciones específicas "2 (ubicadas por el ID)

Seleccionaremos un ID especifico y le cambiaremos el tipo, Icono, Label en on y en off. Este es un caso mas complejo ya que el tipo toggle maneja diferentes opciones, como vemos a continuación.

var toggleGlobal = true;

// Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento
$( "#customized_menu" ).menu({
  // creamos un "listener" del evento beforeOpen
  beforeOpen: function( event, ui ) {

    // guardamos la coleccion de items para luego recorrer uno por uno
    var menuItems = ui.menu.items;

      menuItems = menuItems.map( function ( item ) {
      // buscamos si es el ID 40 y modificamos sus propiedades
      if (item.id == 40 ){
        item.type = "toggle";
        item.set = function(e) {
          // e tiene el valor de true o false, dependiendo del estado del toggle
          console.log('set status',e);
          // lo asignamos a nuestra variable global
          toggleGlobal = e;
        }
        item.get = function(e,f) {
         // aquí devolvemos true o false, dependiendo que queremos mostrar
         // para el ejemplo retornamos el valor de nuestra variable global toggleGlobal1
         console.log('get',e,f,toggleGlobal);
         return toggleGlobal;
       }
       //item.label =  "toggle"; // si definimos label , será prioridad sobre el on / off label;
       delete item.label; // remover la propiedad label definida inicialmente
       item.onLabel =  "Toggle onLabel";
       item.offLabel =  "Toggle offLabel";
       item.onIcon = "fa-badge-check";
       item.offIcon = "fa-badge";
      }
      return item;
    });

    }

});

Ejemplo: blog

Como base nos guiaremos del blog de John Snyders donde crea un popup menu custom. APEX 5.0 Custom Menus

La documentación oficial del ítem y otras opciones están en Widget: menu y un ejemplo de Oracle Menu Popup

Consideraciones

• Como parte del ejemplo estamos agregando dos ítems para mostrar el resultado en cada acción set del toggle, ver line con apex.item("P1010_TOGGLE_1").setValue(e);

• Se están usando dos botones de toggle, para ver la diferencia cuando se coloca el label o cuando queremos usar un label e icono diferente en on y off del toggle.

Necesitaremos un botón que abrirá el menu:

• Recordemos agregar el atributo data-menu="actionsMenu" donde actionsMenu será nuestro identificador para agregar los valores del menu luego

Ahora crearemos las opciones del menu , en la sección Function and Global Variable Declaration de APEX

// Creamos nuestra variable *toggleGlobal* que nos servirá para guardar el estado del toggle
var toggleGlobal1 = true;
var toggleGlobal2 = true;
var menu$ = $("<div id='actionsMenu'></div>");

function _initMenuPopup()  {

  $("body").append(menu$);
  menu$.menu({
  iconType: "fa",
  items: [
      {
        id:'toggleTest1'
      , type: "toggle"
      , set: function(e) {
        // e tiene el valor de true o false, dependiendo del estado del toggle
        console.log('set status',e);
        // lo asignamos a nuestra variable global
        toggleGlobal1 = e;
        apex.item("P1010_TOGGLE_1").setValue(e);
      }
     , get: function(e,f) {
        // aquí devolvemos true o false, dependiendo que queremos mostrar
        // para el ejemplo retornamos el valor de nuestra variable global toggleGlobal1
        console.log('get',e,f,toggleGlobal1);
        return toggleGlobal1;
      }
     //, label:  "toggle" // si definimos label , será prioridad sobre el on / off label
     , onLabel:  "Toggle onLabel"
     , offLabel:  "Toggle offLabel"
     , onIcon: "fa-badge-check"
     , offIcon: "fa-badge"
     //, disabled: false
    },
    {
      type: "separator",
      label: "-",
      href: "separator"
    } ,
    {
        id:'toggleTest1',
        type: "toggle"
      , label:  "toggle"
      , set: function(e) {
        // e tiene el valor de true o false, dependiendo del estado del toggle
        console.log('set status',e);
        // lo asignamos a nuestra variable global
        toggleGlobal2 = e;
        apex.item("P1010_TOGGLE_2").setValue(e);
        }
      , get: function(e,f) {
         // aquí devolvemos true o false, dependiendo que queremos mostrar
         // para el ejemplo retornamos el valor de nuestra variable global toggleGlobal1
         console.log('get',e,f,toggleGlobal2);
         return toggleGlobal2;
       }
      , label:  "toggle" // si definimos label , será prioridad sobre el on / off label
      , onLabel:  "Toggle onLabel"
      , offLabel:  "Toggle offLabel"
      , onIcon: "fa-badge-check"
      , offIcon: "fa-badge"
      //, disabled: false
    }
  ]
  })
};

inicializamos nuestra función

_initMenuPopup();
```

El primer paso será crear la variable global dentro de "shared components" para nuestro ejemplo es G_PET_NAME y lo marcamos como Global.

Debemos crear este ítem en todas las aplicaciones que deseamos compartir y con el mismo nombre.

Nota: Por seguridad dejamos "Sesión State Protection" como Restricted

Importante

Ahora para que ambas aplicaciones compartan, necesitamos que el Authentication Scheme se comparta el mismo cookie.

De la misma forma esta configuración debe hacerse por igual en todas las aplicaciones donde se compartirá.

Test

Para hacer la prueba, crearemos 1/2 item en page 1,

y en el submit (Button Save Values) asignaremos los valores de los ítems a las variables globales, G_PET_NAME, G_PET_STATUS

En la aplicación vemos que no tenemos valores en sesión...

Presionamos Guardar... y vemos los valores ahora en sesión.

En la otra app, creamos los mismos ítems y la fuente será un computation que tomará el valor de las globales.

Si vemos el app en ejecución, veremos cómo se seteo el valor que ingresamos en el APP 1, en el APP 2

Espero les sirva, recuerden lo importante es el COOKIE

Formas de leer un JSON en Oracle

• Usando JSON_TABLE

• Usando APEX_JSON

Para leer un formato tipo JSON dentro de ORACLE existen diferentes formas una de ellas es usando APEX_JSON.

También podemos usar JSON_TABLE como vemos en este otro blog.

En el siguiente blog daré algunas formas de leer los diferentes atributos usando PL-SQL.

Tomaremos de ejemplo el siguiente JSON.

En el script completo dejare toda la demo incluida la creación de la tabla para la prueba.

Script Ejemplo 1

Script Ejemplo 2

JSON:

{
  "squadName": "Super hero squad",
  "active"   : true,
  "attributes" : {
                  "formed"    : 2016,
                  "secretBase": "Super tower",
                  "Address"   : {
                                  "city"    : "South San Francisco",
                                  "zipCode" : 99236,
                                  "country" : "United States of America"
                                }
  },
  "members": [
    {
      "name"          : "Molecule Man",
      "age"           : 29,
      "secretIdentity": "Dan Jukes",
      "powers"        : ["Radiation resistance",
                         "Turning tiny"
                        ]
    },
    {
      "name"          : "Madame Uppercut",
      "age"           : 39,
      "secretIdentity": "Jane Wilson",
      "powers"        : ["Million tonne punch"
                        ]
    },
    {
      "name"          : "Eternal Flame",
      "age"           : 1000000,
      "secretIdentity": null,
      "powers"        : ["Immortality",
                          "Heat Immunity",
                          "Inferno",
                          "Teleportation",
                          "Interdimensional travel"
                        ]
    }
  ]
}

Empezaremos con determinar cuantas claves(Keys) tenemos en cada objeto.

declare
    l_json          demo_json.json_column%type;
    l_cantidad      number;
    json_content    apex_json.t_values;
    l_members       apex_t_varchar2;
    l_sub_array     apex_t_varchar2;
begin
  -- retornamos el JSON de ejemplo dentro de l_json
  select json_column into l_json from demo_json;
  -- paseamos el json con apex_json.parse
  apex_json.parse(json_content, l_json);

  -- cantidad de claves del objeto principal
  l_cantidad := apex_json.get_count(p_path => '.' ,p_values => json_content);
  dbms_output.put_line ('Cantidad de claves : '); -- 4 atributos
  dbms_output.put_line ('.. en el objeto principal ' || l_cantidad ); -- 4 atributos
  dbms_output.put_line ('.. dentro del objeto "attributes" ' ||  apex_json.get_count(p_path=> 'attributes'  , p_values => json_content ) );
  dbms_output.put_line ('.. dentro del objeto "attributes.Address" ' ||  apex_json.get_count(p_path=> 'attributes.Address'  , p_values => json_content ) );

  l_members := apex_json.get_members(p_path=> 'members[1]'  , p_values => json_content );
  dbms_output.put_line ('.. dentro del sub array  members[1]  ' || l_members.count  );

  -- Note que aquí es muy diferente para sacar la cantidad de valores dentro del array power
  l_sub_array := apex_json.get_t_varchar2 (p_path=> 'members[3].powers'  , p_values => json_content );
  dbms_output.put_line ('.. dentro del sub array "members[1].powers" ' || l_sub_array.count );

  -- igual diferente para obtener la cantidad de los objetos dentro del array members
  l_cantidad := apex_json.get_count (p_path=> 'members'  , p_values => json_content );
  dbms_output.put_line ('.. dentro del sub array "members" ' ||  l_cantidad );
end;

A modo de práctica varemos como imprimir estas claves del JSON.

declare
    l_json          demo_json.json_column%type;
    l_cantidad      number;
    json_content    apex_json.t_values;
    l_members       apex_t_varchar2;
    l_sub_array     apex_t_varchar2;
begin
  -- retornamos el JSON de ejemplo dentro de l_json
  select json_column into l_json from demo_json;
  -- paseamos el json con apex_json.parse
  apex_json.parse(json_content, l_json);

  -- cantidad de claves del objeto principal
  l_cantidad := apex_json.get_count(p_path => '.' ,p_values => json_content);
  dbms_output.put_line ('Cantidad de claves : '); -- 4 atributos
  dbms_output.put_line ('-------------------------------------------' );
  dbms_output.put_line ('.. en el objeto principal ' || l_cantidad ); -- 4 atributos

  l_members := apex_json.get_members(p_path=> '.'  , p_values => json_content );
  for i in 1 .. l_cantidad
  loop
    dbms_output.put_line ('l_members: ' ||  l_members(i) );
  end loop;

  dbms_output.put_line ('-------------------------------------------' );
  dbms_output.put_line ('.. dentro del objeto "attributes" ' ||  apex_json.get_count(p_path=> 'attributes'  , p_values => json_content ) );
  l_members := apex_json.get_members(p_path=> 'attributes'  , p_values => json_content );
  for i in 1 .. l_members.count
  loop
    dbms_output.put_line ('attributes: ' ||  l_members(i) );
  end loop;

  dbms_output.put_line ('-------------------------------------------' );
  dbms_output.put_line ('.. dentro del objeto "attributes.Address" ' ||  apex_json.get_count(p_path=> 'attributes.Address'  , p_values => json_content ) );
  l_members := apex_json.get_members(p_path=> 'attributes.Address'  , p_values => json_content );
  for i in 1 .. l_members.count
  loop
    dbms_output.put_line ('attributes.Address: ' ||  l_members(i) );
  end loop;

  dbms_output.put_line ('-------------------------------------------' );
  l_members := apex_json.get_members(p_path=> 'members[1]'  , p_values => json_content );
  dbms_output.put_line ('.. dentro del sub array  members[1]  ' || l_members.count  );
  for i in 1 .. l_members.count
  loop
    dbms_output.put_line ('members[1]: ' ||  l_members(i) );
  end loop;

  dbms_output.put_line ('-------------------------------------------' );
  -- Note que aquí es muy diferente para sacar la cantidad de valores dentro del array power
  l_sub_array := apex_json.get_t_varchar2 (p_path=> 'members[3].powers'  , p_values => json_content );
  dbms_output.put_line ('.. dentro del sub array "members[1].powers" ' || l_sub_array.count );
  for i in 1 .. l_sub_array.count
  loop
    dbms_output.put_line ('members[3].powers: ' ||  l_sub_array(i) );
  end loop;

  dbms_output.put_line ('-------------------------------------------' );
  -- Obtener la cantidad de los objetos dentro del array members
  l_cantidad := apex_json.get_count (p_path=> 'members'  , p_values => json_content );
  dbms_output.put_line ('.. dentro del sub array "members" ' ||  l_cantidad );
end;

Ahora empezaremos a obtener los valores de cada nodo.

Primero los del objeto superior, como todos los elementos son objetos es más sencillo.

declare
    l_json          demo_json.json_column%type;
    l_boolean       boolean;
    json_content    apex_json.t_values;

begin
  -- retornamos el JSON de ejemplo dentro de l_json
  select json_column into l_json from demo_json;
  -- paseamos el json con apex_json.parse
  apex_json.parse(json_content, l_json);

  dbms_output.put_line ('----------------  Nodo Principal  ---------------------------' );
  dbms_output.put_line ('squadName : ' || apex_json.get_varchar2(p_path => 'squadName' ,p_values => json_content) );
  dbms_output.put_line ('active : ' ||  apex_json.get_varchar2 (p_path => 'active' ,p_values => json_content));
  l_boolean := apex_json.get_boolean (p_path => 'active' ,p_values => json_content);
  dbms_output.put_line ('active : ' ||  case when l_boolean = true then 'value true' else 'value false' end );

  dbms_output.put_line ('----------------  Sub Nodo attributes ---------------------------' );
  dbms_output.put_line ('formed : ' || apex_json.get_varchar2(p_path => 'attributes.formed' ,p_values => json_content) );
  dbms_output.put_line ('secretBase : ' || apex_json.get_varchar2(p_path => 'attributes.secretBase' ,p_values => json_content) );

  dbms_output.put_line ('----------------- Sub Nodo Address --------------------------' );
  dbms_output.put_line ('city : '    || apex_json.get_varchar2(p_path => 'attributes.Address.city' ,p_values => json_content) );
  dbms_output.put_line ('zipCode : '    || apex_json.get_number(p_path => 'attributes.Address.zipCode' ,p_values => json_content) );
  dbms_output.put_line ('country : '    || apex_json.get_varchar2(p_path => 'attributes.Address.country' ,p_values => json_content) );

end;

Para el array de datos necesitaremos hacer un loop.

declare
    l_json          demo_json.json_column%type;
    l_boolean       boolean;
    json_content    apex_json.t_values;
    l_cantidad      number;
    l_members       apex_t_varchar2;
begin
  -- retornamos el JSON de ejemplo dentro de l_json
  select json_column into l_json from demo_json;
  -- paseamos el json con apex_json.parse
  apex_json.parse(json_content, l_json);

  dbms_output.put_line ('----------------  Array Members  ---------------------------' );
  l_cantidad := apex_json.get_count (p_path=> 'members'  , p_values => json_content );
  for i in 1 .. l_cantidad
  loop
    dbms_output.put_line ('----------------  Objeto: ' ||i||  '---------------------------' );
    dbms_output.put_line ('name: ' ||  apex_json.get_varchar2 (p_path => 'members[%d].name', p0 => i, p_values => json_content) );
    dbms_output.put_line ('age: ' ||  apex_json.get_varchar2 (p_path => 'members[%d].age', p0 => i, p_values => json_content) );
    dbms_output.put_line ('secretIdentity: ' ||  apex_json.get_varchar2 (p_path => 'members[%d].secretIdentity', p0 => i, p_values => json_content) );

      dbms_output.put_line ('................  Poderes ............' );
      -- note que aquí usaremos get_t_varchar2 un array de string para almacenar los poderes
      l_members := apex_json.get_t_varchar2 (p_path => 'members[%d].powers', p0 => i, p_values => json_content );
      for i in 1 .. l_members.count
      loop
          dbms_output.put_line ('powers: ' ||  l_members(i) );
      end loop;

  end loop;

end;

Y de esta habremos podido acceder a todos los niveles y datos de nuestro objeto JSON.

Referencias:

Mas información de este package lo podemos encontrar en:

• Oracle Doc Ref

• Oracle Base

• Stack overflow - Acceso a datos específicos

• Otros ejemplos

Para leer un formato tipo JSON dentro de ORACLE existen diferentes formas una de ellas es usando JSON_TABLE.

En el siguiente blog daré algunas formas de leer los diferentes atributos usando PL-SQL.

Tomaremos de ejemplo el siguiente JSON.

En el script completo dejare toda la demo incluida la creación de la tabla para la prueba.

JSON:

{
  "squadName": "Super hero squad",
  "active"   : true,
  "attributes" : {
                  "formed"    : 2016,
                  "secretBase": "Super tower",
                  "Address"   : {
                                  "city"    : "South San Francisco",
                                  "zipCode" : 99236,
                                  "country" : "United States of America"
                                }
  },
  "members": [
    {
      "name"          : "Molecule Man",
      "age"           : 29,
      "secretIdentity": "Dan Jukes",
      "powers"        : ["Radiation resistance",
                         "Turning tiny"
                        ]
    },
    {
      "name"          : "Madame Uppercut",
      "age"           : 39,
      "secretIdentity": "Jane Wilson",
      "powers"        : ["Million tonne punch"
                        ]
    },
    {
      "name"          : "Eternal Flame",
      "age"           : 1000000,
      "secretIdentity": null,
      "powers"        : ["Immortality",
                          "Heat Immunity",
                          "Inferno",
                          "Teleportation",
                          "Interdimensional travel"
                        ]
    }
  ]
}

Accediendo al nodo principal

Para acceder a los atributos primarios deberemos usar el símbolo $ seguidamente con el nombre del atributo a mostrar.

también podemos mostrar el valor de todo un array u objecto que contiene varios objetos usando format json

  select jt.*
    from demo_json a
       , json_table(a.json_column, '$[*]'
         columns (  squadName       varchar2(100) path '$.squadName'
                  , active          varchar2(100) path '$.active'
                  , attributes_json format json path '$.attributes'
                  , members_json    format json path '$.members'
                 )
         ) jt;

Accediendo al nodo hijo attributes

Simplemente concatenamos el objecto a buscar con el atributo.

Para el ejemplo del address seria usando format json.

  select jt.*
    from demo_json a
       , json_table(a.json_column, '$[*]'
         columns (  squadName             varchar2(100) path '$.squadName'
                  , active                varchar2(100) path '$.active'
                  , attributes_formed     varchar2(100) path '$.attributes.formed'
                  , attributes_secretBase varchar2(100) path '$.attributes.secretBase'
                  , attributes_address    format json   path '$.attributes.Address'
                 )
         ) jt;

Accediendo al nodo hijo/hijo attributes/address

Continuamos concatenando el valor con puntos.

Note que puede declarar atributos tipo number como formed o zipCode.

  select jt.*
    from demo_json a
       , json_table(a.json_column, '$[*]'
         columns (  squadName             varchar2(100) path '$.squadName'
                  , active                varchar2(100) path '$.active'
                  , attributes_formed     number        path '$.attributes.formed'
                  , attributes_secretBase varchar2(100) path '$.attributes.secretBase'
                  , attr_address_city     varchar2(100) path '$.attributes.Address.city'
                  , attr_address_zip      number        path '$.attributes.Address.zipCode'
                  , attr_address_country  varchar2(100) path '$.attributes.Address.country'
                 )
         ) jt;

Accediendo al nodo hijo members array

Como este nodo tiene un array de objectos necesitamos hacer un loop, para ello usaremos nested path.

El nodo de powers es igual otro array por lo que mostraremos como format json

  select jt.*
    from demo_json a
       , json_table(a.json_column, '$[*]'
         columns (  squadName       varchar2(100) path '$.squadName'
                  , active          varchar2(100) path '$.active'
                  , nested path '$.members[*]'
                    columns (
                        name            varchar2(100)   path '$.name'
                      , age             number          path '$.age'
                      , secretIdentity  varchar2(100)   path '$.secretIdentity'
                      , powers          format json     path '$.powers'
                    )
            )
         ) jt;

Accediendo al nodo hijo members/powers array

En el último nodo accederemos de forma similar al anterior usando nested path y usando '$'

  select jt.*
    from demo_json a
       , json_table(a.json_column, '$[*]'
         columns (  squadName       varchar2(100) path '$.squadName'
                  , active          varchar2(100) path '$.active'
                  , nested path '$.members[*]'
                    columns (
                        name            varchar2(100)   path '$.name'
                      , age             number          path '$.age'
                      , secretIdentity  varchar2(100)   path '$.secretIdentity'
                      --, powers format json path '$.powers'
                      , nested path '$.powers[*]'
                        columns (
                            power            varchar2(100)   path '$'
                        )
                    )
            )
         ) jt;

Ejemplo 2

Para este ejemplo cambiaremos un poco la estructura del JSON

{
  "data": [
    [
    "7764355",
    "23189291"
    ],
    [
    "7764355",
    "23189295"
    ]
  ],
  "meta": {
    "columns": [
      "session_id",
      "event_id",
    ],
    "count": 4
  }
}

Nodo 1

Para acceder al nodo primario usaremos:

  select jt.*
    from demo_json_2 a
       , json_table(a.json_column, '$.data[*]'
         columns (  row_num for ordinality,
                    nested path '$[*]'
                    columns (
                        row_1            varchar2(100)   path '$'
                    )
            )
         ) jt;

Nodos restantes

Para ello podremos acceder de la siguiente forma:

  select jt.*
    from demo_json_2 a
       , json_table(a.json_column, '$.meta[*]'
         columns (  row_num for ordinality,
                    count_c varchar2(100) path '$.count',
                    nested path '$.columns[*]'
                    columns (
                        col_1            varchar2(100)   path '$'
                    )
            )
         ) jt;

Referencias

Oracle Doc Ref

Ref_2