Oracle JET and Oracle APEX are best friends💕

-

Oracle JET and Oracle APEX are best friends  💕  

While Oracle JET is commonly associated with charts in Oracle APEX, it’s capable of much more. Oracle JET offers various tools and components for building modern web applications. The Oracle JET library required by APEX is included as part of the Oracle APEX, so there’s no need for additional installation. However, only the specific Oracle JET components used by APEX are built in, and advanced use cases require separately incorporating other parts of the full Oracle JET library. So if developers require additional JET components not bundled with APEX they should manually incorporate components into their APEX applications.

 What is Oracle JET?

Oracle JET (JavaScript Extension Toolkit) is a free, open-source toolkit for building modern, responsive, and accessible web applications. It leverages advanced JavaScript, HTML5, and CSS3 and incorporates popular libraries like jQuery, RequireJS, and Knockout.js technologies to provide a rich set of UI components. Oracle JET is a powerful tool for creating highly customizable and dynamic user interfaces.

Oracle JET is integrated into Oracle APEX, providing APEX developers access to its powerful visualization and UI components. Oracle JET libraries can be sourced directly from a CDN such as jsDelivr for standalone usage or custom implementations.

Relevant links for Oracle Jet:

https://cdn.jsdelivr.net/npm/@oracle/oraclejet@14.1.0/dist/js/libs/oj/min/

https://www.jsdelivr.com/ 

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

Where Oracle JET is Used in Oracle APEX

In APEX natively The Chart region is powered by Oracle JET and also The Text Field with Autocomplete item leverages Oracle JET to provide dynamic suggestions as users type.

1. Chart Regions

As I mentioned Oracle APEX uses Oracle JET to create charts. Let's take a look at a chart example and what we can do with Oracle Jet.
In your APEX application and one page create a chart and follow the below pictures.



            

SELECT DEPTNO AS label, SUM(sal) AS value FROM emp GROUP BY DEPTNO;


In the Chart Attributes, you can adjust Labels, Colors, Tooltip formatting, and Legends actually this way you are using the interactive JET chart in Oracle APEX.


But in some scenarios, built-in charts don’t meet your needs, you can create custom JET visualizations. For this purpose, you have two choices: 

1)The Initialization JavaScript Function in charts of Oracle APEX is a powerful feature that allows you to customize how an Oracle JET chart looks and behaves. You can write JavaScript to modify the Oracle JET chart's options.

you can check the below link and you will see what you can change in your chart. Attributes,Definition,...




function configureChart(options) {
    options.type = "line";

    options.styleDefaults = {
    colors: ["#1f77b4", "#ff7f0e", "#2ca02c"] };

    options.selectionMode = "multiple";
    options.drilling = "on";  // Enable drilling

    options.xAxis = {
        title: "Categories",

        labelStyle: {
            fontSize: "12px", 

            color: "#333"
        }

    };
    options.yAxis = {

        title: "Sales Amount", 
        labelStyle: {

            fontSize: "12px", 
            color: "#333"

        }
    };

    return options;
} 

2)  Create a region with static content type

 


put this code in HTML or set a staticID for your region
<div id="myChart" style="width: 100%; height: 400px;"></div>

then create a Dynamic Action for rendering 





    require(['ojs/ojchart', 'jquery'], function (ojChart, $) {
     var chartData = {
        series: [
            { name: 'Dept A', items: [10] },
            { name: 'Dept B', items: [20] },
            { name: 'Dept C', items: [30] }
        ],
        categories: ['Salery Amount']
    };

    $('#myChart').ojChart({
        type: 'bar',
        series: chartData.series,
        groups: chartData.categories,
        orientation: 'vertical'
    });   
});

 ...............................................

 require(['ojs/ojchart', 'jquery'], function (ojChart, $) {
    var chartData = {
        series: [
            { name: 'Category A', items: [42] },
            { name: 'Category B', items: [34] },
            { name: 'Category C', items: [24] }
        ]
    };

    $('#myChart').ojChart({ 

      type: 'pie',
        series: chartData.series
    });

 });

 ...............................................

    var chartType = $v('P2_CHART_TYPE');
    var chartData = {
        series: [
            { name: 'Category A', items: [42] },
            { name: 'Category B', items: [34] },
            { name: 'Category C', items: [24] }  ]
    };
    $('#myChart2').ojChart({
        type: chartType,
        series: chartData.series

    });


TIPS: explain the code 
 
  • require([...], function (...) {...}):
This function is part of RequireJS, a JavaScript module loader. It dynamically loads the specified modules (ojs/ojchart and jquery) and executes the code inside the callback function after the modules are loaded https://requirejs.org/ but APEX provides several libraries and modules (like ojcore, jquery, ojchart, etc.) that you can use directly within your pages.so you do not need require(['ojs/ojchart', 'jquery'], function (ojChart, $)  part of code in oracle apex for creating chart.
  • ojs/ojchart:
This is the Oracle JET Chart module used to create and customize charts. It includes various chart types like bar, pie, and line charts.
  • jquery:
The jQuery library is used for DOM manipulation and event handling.
  • Callback function (function (ojChart, $) {...}):
The loaded modules (ojChart and $) are passed as parameters to this function for use within the callback.

Comments

Post a Comment

Popular posts from this blog

JavaScript In Oracle APEX (Client Side)

-
Image
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 : Defining the Custom Event 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 it...
Read more

Installation of Oracle Database 23ai and APEX 24.2 and ORDS 24.4 on Windows Step-by-Step

-
Image
👀 Watch The below video in my YouTube channel about   Installation of Oracle Database 23ai and APEX 24.2 on Windows Step-by-Step  ✅ Before starting check the System Requirements: Operating System: Windows 10-11 or  Windows Server 19-22 Memory: At least 4 GB RAM (8 GB or more recommended). Disk Space: At least 20 GB of free space. Administrator Access: You need administrative privileges to install software.   Install  Oracle Database 23ai on Windows: 👀I suggest you watch this video on my YouTube channel about this article my_video step1: Download  Oracle Database 23ai from below Link https://www.oracle.com/database/free/get-started/ you can also see the Installation Guide for Microsoft Windows: https://docs.oracle.com/en/database/oracle/oracle-database/23/xeinw/index.html step 2: after unzipping downloaded files then click setup.exe step 3: This is mandatory to have at least one pluggable database in this step oracle start to configure LISTE...
Read more

Building a Fully Local AI-Powered Assistant with Oracle APEX and Vector Search #APEXCONN2025 #orclAPEX

-
Image
👩 : Falls Sie nicht müde sind  :-| 👨 : Ich bin immer müde, aber das ist okay :-) I recently attended the APEX Connect 2025 conference from Syntegris Company.  One of the presentations that strongly caught my attention focused on the development of a personal assistant powered by Artificial Intelligence (AI), which runs completely offline,  with no reliance on cloud services . This assistant was implemented using technologies such as Oracle Database 23ai , Vector Search , and the RAG (Retrieval-Augmented Generation) approach. It was designed to manage personal information, emails, calendar entries, and project data. 👀Watch this short Video about  #ApexConn2025    https://youtube.com/shorts/UQmwwTEsJuk?si=WJUXdJ4jvh1Nmsap The presenter highlighted the challenges of his life, such as: High volumes of daily emails  Multiple overlapping meetings Fragmented and scattered information He proposed a personal AI assistant that could : Filter emails and ext...
Read more

Configuration of ORDS: Standalone, Tomcat, and WebLogic on Windows Step-by-Step

-
Image
  If you did not install Oracle database 23ai and Apex24.2 you can first use the below link to install them and then back here to install and config ORDS. How we can Install APEX 24.2 and Oracle Database 23ai on Windows Step by Step: https://lidagholizadeh.blogspot.com/2025/03/install-oracle-database-23ai-and-apex.html 👀 Watch The below video in my YouTube channel about   Installation of Oracle Database 23ai and APEX 24.2 on Windows Step-by-Step  Why Do We Need ORDS for APEX? Oracle ORDS (Oracle REST Data Services) is a middle-tier application that enables RESTful web services for Oracle databases. It is essential for running Oracle APEX (Application Express) because APEX is a web-based application development platform that needs a web server to handle HTTP requests.We need it because APEX does not include a built-in web server.  It acts as a bridge between an Oracle Database and web applications, allowing developers to expose database objects  as RE...
Read more

✔ RTL Map Region Labels APEX 24.2 & 🌍GeoCoding

-
Image
  ✔   RTL Map Region Labels 24.2 Map regions have been enhanced to provide full support for right-to-left text rendering. This fixes an outstanding bug regarding displaying RTL labels in Map regions. 👀 Video for this article:  https://www.youtube.com/watch?v=K5zKPJeRwXM&t=66s In Oracle APEX versions before 24.2, developers encountered issues with rendering right-to-left (RTL) text labels within Map Regions. Specifically, labels in Persian, Arabic, or Hebrew did not display correctly, leading to misaligned or improperly oriented text. This limitation hindered the usability and accessibility of applications for RTL language users. With the release of Oracle APEX 24.2, this issue has been addressed. Map Regions now fully support RTL text rendering, ensuring that labels in RTL languages display correctly and align properly on the map. This enhancement improves the overall user experience for applications catering to RTL language audiences. 🌍   Geocoding in APEX...
Read more

Building an AI-Powered Resume Matching System Using Oracle APEX and 23ai Vector Search😎

-
Image
I am going to Develope an AI-powered Resume Match system using 23ai vector search in an Oracle APEX application to  to semantically compare project descriptions with personnel resumes. The system calculates and ranks the percentage of relevance between each project and candidate profile. During this process you will learn about Oracle AI Vector Search and Similarity Search   During this process, you'll gain hands-on experience with: Oracle AI Vector Search Semantic Similarity Search Integrating ONNX models Oracle APEX Interactive Reports and Charts 👀 In the video below on my YouTube  Channelhttps://www.youtube.com/@LidaGholizadeh_ORACLE_GIS , you can see the steps of Building an AI-Powered Resume Matching System Using Oracle APEX and 23ai Vector Search 🟎 Overview of Steps Before creating APEX app you need 2 steps as below : 1) Create an Oracle DB23ai on Oracle Cloud  Use Oracle Cloud Infrastructure (OCI) to create a 23ai-compatible Ora...
Read more

Vector Tiles in Oracle Spatial 23

-
Image
Vector tiles are an efficient way to deliver and render map data in web applications. Unlike raster tiles, which are pre-rendered images, vector tiles contain raw geometries and attributes, allowing for dynamic styling and interaction on the client side. 🕮  What Are Vector Tiles? Imagine a large map divided into small, manageable square sections called "tiles."  There are two primary types of tiles: Raster Tiles : Static images representing the map. Zooming in can cause pixelation, and any style changes require generating new images. Vector Tiles : Contain raw geometric data and attributes. They allow for smooth scaling without loss of quality and enable dynamic styling, such as changing colors or labels, directly in the browser. Oracle Spatial 23c introduces support for generating and serving vector tiles directly from spatial data stored in the database. Step 1: Prepare Your Spatial Data Ensure your spatial data is stored in a table with an SDO_GEOMETRY column. CREATE T...
Read more

What is SYS.ODCI (SYS.ODCINumberList or SYS.ODCIVarchar2List) and How Can Use it in APEX ?

-
Image
⍰    What is SYS.ODCI...? Oracle database provides predefined collection types, such as  SYS.ODCINUMBERLIST and SYS.ODCIVARCHAR2LIST , which simplifies operations involving lists of numbers or strings.  SYS.ODCI  designed for bulk operations   and they  are nested table types that store lists of numbers and strings,  respectively.  ⍰    Can we use  SYS.ODCI  instead of  TABLE OF  Types ? In some cases, you can use SYS.ODCI types like instead of defining your own nested table types. For example, if you need a collection of numbers or strings, you can use these system types instead of defining something like this yourself because User-defined types require explicit definitions. In contrast, SYS.ODCINUMBERLIST and similar predefined types are readily available and can be used both in PL/SQL and SQL contexts without additional definitions. But In general,  For more complex structures (like objects with multiple...
Read more

My Experience at Oracle CloudWorld Tour in Frankfurt – April 10, 2025

-
Image
Today, I had the opportunity to attend the Oracle CloudWorld Tour in Frankfurt, held at the Congress Center Messe Frankfurt. This free, one-day event was an important stop on Oracle's global tour, bringing together technology experts, business leaders, and professionals to explore the latest advancements in cloud computing and artificial intelligence (AI). 👀 I recorded a short video below just to show the environment and atmosphere watch It! https://www.youtube.com/watch?v=-zRCkJB6qw8 The event offered deep insights into how Oracle’s cloud infrastructure and AI services are transforming industries. The sessions covered key topics such as automation, data analytics, and the integration of AI into business processes—showcasing the real-world impact of these technologies. One of the highlights was the hands-on demonstrations, where participants could explore Oracle’s latest innovations and learn about their practical applications and benefits. These interactive experiences made the t...
Read more