What Is #TIMING#?

The *TIMING# substitution variable represents the elapsed time (in seconds) taken to render a region, including the time to fetch data and render region items. This variable is available for use in the footer of any report region (such as Interactive Reports, Classic Reports, or Charts).

Why Use #TIMING#?

• Performance Transparency: Show users how long their reports take to run, helping set expectations for data-heavy queries.

• Troubleshooting: Quickly identify slow-running regions on a page, making it easier to pinpoint and tune problematic queries.

• User Communication: When users request large or complex datasets, the timing info helps explain longer wait times.

How to Implement #TIMING# in Your Reports

1. Edit the Report Region:
   In Page Designer, select the report region you want to monitor.

2. Add #TIMING# along with other substitution strings to the Footer:

   Fetched #ROWS_FETCHED# rows of #TOTAL_ROWS# in #TIMING# seconds

   Special Built-in Region Substitution Strings

   | Substitution String | Description | | --- | --- | | #ROWS_FETCHED# | Number of rows fetched by the report | | #TOTAL_ROWS# | Total number of rows in the query | | #TIMING# | Time taken to render the region (in seconds) | | #APEX$ROW_NUM# | Row number in Classic Reports |

3. Save and Run:
   Save your changes and run the application. The footer will now display real-time execution metrics every time the report runs.

   

   Considerations

   • Works Per Region: #TIMING# is available only for report regions, not for the entire page or non-report regions.

   • Debugging: For deeper performance analysis, use APEX’s debug mode (LEVEL9) to see detailed execution times for every component.

The CSS

A floating action button is a circular button that “floats” above the UI, typically in the lower right corner, providing quick access to a key action (like “Add,” “Create,” or “Scan”). With a bit of CSS and a Universal Theme icon, you can implement this in minutes.

How to Implement

Step 1: Add a Button to Your Page

• In Page Designer, add a new Button (e.g., “Add”) to your APEX page.

• Set its class to c-floating-bt.

• Choose an appropriate icon (like fa-plus or fa-camera).

  

Step 2: Apply Custom CSS

Add the following CSS to your page (Page > CSS or in your app’s CSS file):

.c-floating-bt {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 100;
  height: 65px;
  width: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 2rem;
}

The button will appear at the bottom right of the page.

Conclusion

• Native Feel: Mimics the UI of leading mobile apps, making your APEX app feel instantly more modern.

• User Experience: Keeps primary actions accessible, reducing taps and scrolling.

• Easy to Implement: Just a button and a few lines of CSS, no plugins or complex code.

APEX uses the best of the modern web to create native web applications. Oracle Forms uses NPAPI plugins relying on Java technologies to render the page. Whilst we could go on and on describing the advantages of one over the other and believe us, there are strong opinions on both sides. We, as APEX enthusiasts, acknowledge that whilst many a Forms-to-APEX redevelopment project can be a trouble-free experience – there are some Oracle Forms features that makes the redevelopment a bit sticky.

Many of these thorny features are due to browser security vs. a standalone client-server application and some are just old-school features which don’t have an easy equivalent in a web application.

Let’s start with a list of Webutil features which cause a problem within APEX. The vast majority of Webutil features are going to be difficult to overcome in APEX. If you’ve never heard of Webutil, it’s an Oracle Forms Library that was built to provide access to modules which typically interact with the clients PC e.g. file system, environment variables, etc. If you try to think of any web page which tries to move files around, start programs or read information about the client PC well… that sounds a little scary, but luckily due to browser security we are protected. It’s that same browser security which prevents an APEX page from leaping outside of the browser performing those undesirable actions.

Let’s look at our list…

Running the Host command
Once again, due to browser security, we are unable to run a host command from a web application, and some Oracle Forms needed it to run simple Microsoft windows apps like a calculator or even execute .bat files as part of their functionality.

Manipulate client side files
Typically functionality includes, creating a folder on the clients HDD, checking if it exists and creating files in that folder. It’s not uncommon to have this functionality within an Oracle Forms application, and would definitely not be the norm within a web page.

Read information from the client machine (Tool_Env)
We can easily authenticate on an APEX application using Active Directory however the browser cannot easily detect the user currently logged to the OS (without some trickery). The username and other client data are not accessible from the browser.

Read and write client side images
Within Oracle Forms, you can easily read and write images on the client side without any user interaction.

Integrate with client side OLE2 (e.g. Word and Excel)
This feature enables Oracle Forms to open a local copy of Word/Excel on the clients machine, get and set values, and provides many other features including saving and printing. For the same reasons above, your web browser will restrict any OLE2 attempts from APEX; however a typical workaround involves moving that code to the Database and have the Database Server interact with local copies of Word/Excel. (Its not recommended)

In Addition to WebUtil there are some general challenges when comparing a standalone client side application (Forms) to a Web Browser one (APEX).

Print Screen
This takes a picture of your Oracle Form and sends it to the printer; whilst attempting the same in APEX (or any web page) would send a responsive A4 layout version to the printer.

Java Beans
You can probably run java from your apex application, but you need to do additional work to make it work properly. In Oracle Forms this is straightforward with a java beans area.

Pixel Perfect Positioning
In Oracle Forms your items are placed at precise x / y coordinates; in APEX/Rest of the web, the layouts are responsive to the screen size and orientation – this is simplified for the APEX developer by using Universal Theme. Even if you can set the height and weight of items in the browser, it can differ between different browsers.

Multiple Forms Open in the same Run-Time
On Forms you can open another form (or even the same form) without closing the previous one.

Function Keys
You probably do not need the mouse to work on a form screen, this makes the user experience quite agile, when you move to a web application you lose the ability create shortcuts using function keys as these are reserved for the browser itself.

POST
From our experience, this is the most challenging thing to replicate in an APEX environment. Some Oracle Form applications, post the data to make it available through different forms or use it to fire some database trigger validations.

Text_IO
With TEXT_IO I can create a file and save it to a local folder. In a web environment, this automatic integration becomes very complicated.

Given the above list, it’s necessary to select the best approach either to replicate that tricky functionality or identify alternatives. There is no simple rule and it is a case of adapting each thorny issue as you encounter them;

A Dynamic Action could be a good or a bad choice to replicate an Oracle Forms Trigger. An Interactive Grid could replace the multi-row data block or you could be in for a world of trouble. There is no tool that takes an Oracle Form and magically creates an APEX page. The approach varies from Form to Form – sometimes two Forms can become one APEX page, and one Form can become many APEX pages.

Conclusion: Absolutely APEX is the best choice to redevelop your legacy Oracle Forms application. Developers can re-apply their SQL & PL/SQL skills to APEX development – making the leap easier. The larger the forms application, the larger the project… naturally. Those thorny issues may cause you to scratch your head; but it’s unlikely that an alternative cannot be found. APEX continues to be the best option for the future direction of your forms application.

What Are HTML Expressions?

An HTML Expression in Oracle APEX allows you to control how a column’s data is displayed by wrapping it in custom HTML, referencing column values, and using conditional logic—all within the APEX UI. You’ll find the HTML Expression field in many components, including Interactive Reports, Classic Reports, Cards, and Lists.

Key Benefits:

• Separation of concerns: Keep UI logic out of your SQL queries.

• Security: Underlying column data is used for downloads and filtering, not your HTML markup.

• Flexibility: Add icons, badges, tooltips, and more dynamically.

How to Use HTML Expressions

Step 1: Open Page Designer

• Select your report region (Interactive or Classic Report).

• Click the column you want to format.

• Find the “HTML Expression” property.

Step 2: Reference Column Values

• Use #COLUMN_NAME# to insert the value of any column in your SQL query.

Example: This displays the employee name in bold, followed by their job.

<strong>#ENAME#</strong> – #JOB#

Going Further: Template Directives

APEX’s Universal Theme supports powerful template directives for conditional logic and dynamic content.

Conditional Formatting

Show different output based on column values.

<strong>#ENAME#</strong> – 
{case JOB/}
  {when PRESIDENT/}
    <span style="color:red;">#JOB#</span>
  {when MANAGER/}
    <span style="color:blue;">#JOB#</span>
  {otherwise/}
    <span style="color:green;">#JOB#</span>
{endcase/}

Best Practices

• Keep SQL clean: Avoid embedding HTML in your SQL queries. Use HTML Expressions for UI logic.

• Hidden columns: If you need to generate complex HTML or values, create a hidden column in your query and reference it in the HTML Expression.

• Security: The HTML Expression is only rendered in the browser. When users download the report, only the raw data is included, not your HTML, reducing the risk of leaking markup

Check out more examples here.

FilterObject Syntax

The FilterObject syntax follows a simple and intuitive format. It comprises three main components:

1. Column Name: Specifies the name of the database column on which the filtering will be applied.

2. Operator: Defines the filtering operation to be performed, such as equals, greater than, less than, etc.

3. Value: Represents the value used for comparison.

Using these components, developers can construct complex filter expressions to cater to various filtering requirements.

FilterObject in Action

Suppose we have an endpoint to retrieve employee data from the emp table. We can use the FilterObject to fetch employees with a specific job title, salary range, or any other relevant criterion.

To run the examples we are going to see next, we can use the following code and table below.

declare
  l_clob    clob;  
begin
  l_clob := apex_web_service.make_rest_request (
                p_url         => 'https://<your_server>/ords/<workspace>/hr/employees/',
                p_http_method => 'GET');

  dbms_output.put_line(l_clob);

end;

1. Equal ($eq): Supports number, string and dates. The equal filter could be used implicit and explicit.

-- returns employee named KING (= 'KING')
-- implicit
https://<your_server>/ords/<workspace>/hr/employees/?q={"ename":"KING"}
-- explicit
https://<your_server>/ords/<workspace>/hr/employees/?q={"ename":{"$eq":"KING"}}

Note: This filtering is case-sensitive when used with strings

1. Not Equal ($ne): Supports number, string and dates.

-- returns all employees but KING (!= 'KING')
https://<your_server>/ords/<workspace>/hr/employees/?q={"ename":{"$eq":"KING"}}

1. Less than ($lt) / greater than ($gt): Supports number and dates.

-- returns all employees with salary less than 1000 (< 1000)
https://<your_server>/ords/<workspace>/hr/employees/?q={"sal":{"$lt":1000}}
-- returns all employees with salary greater than 1000 (> 1000)
https://<your_server>/ords/<workspace>/hr/employees/?q={"sal":{"$gt":1000}}

1. Less than ($lte) or equal / greater than or equal ($gte): Supports number and dates

-- returns all employees with salary less than 1000 (<= 1000)
https://<your_server>/ords/<workspace>/hr/employees/?q={"sal":{"$lte":1000}}
-- returns all employees with salary greater than 1000 (>= 1000)
https://<your_server>/ords/<workspace>/hr/employees/?q={"sal":{"$gte":1000}}

1. To search for part of string ($instr) / not part of string ($ninstr): Supports string only.

-- returns employees with the letters KI (instr('KI') >0)
https://<your_server>/ords/<workspace>/hr/employees/?q={"ename":{"$instr":"KI"}}
-- returns employees with the letters KI (instr('KI') = 0)
https://<your_server>/ords/<workspace>/hr/employees/?q={"ename":{"$ninstr":"KI"}}

1. Like ($like): Supports strings only.

-- returns employees with name ending with K (emp like '%K')
https://<your_server>/ords/<workspace>/hr/employees/?q={"ename":{"$like":"%K"}}

1. Between ($between): Supports number, string and dates. We call also use null values for dates and numbers.

-- returns employees with hiredate between 17-MAY-81 and 17-NOV-81 (hiredate between '17-MAY-81' and '17-NOV-81')
https://<your_server>/ords/<workspace>/hr/employees/?q={"HIREDATE":{"$between":["17-MAY-81","17-NOV-81"]}}
-- returns employees with salary lest than 1000 (sal <= 1000)
https://<your_server>/ords/<workspace>/hr/employees/?q={"SAL":{"$between":[null,1000]}}

1. Null ($null).

-- returns employees with no comission (COMM is null)
https://<your_server>/ords/<workspace>/hr/employees/?q={"COMM":{"$null":null}}

1. And ($and).

-- returns employees with salary equal to 5000 and name starting with K (sal = 5000 and name like 'K%')
https://<your_server>/ords/<workspace>/hr/employees/?q={"SAL":{"$and":[{"$eq":5000},{"ename":{"$like":"K%"}}]}}

1. Or ($or).

-- returns employees with salary equal to 5000 or 1500 (sal = 5000 or sal = 1500)
https://<your_server>/ords/<workspace>/hr/employees/?q={"SAL":{"$or":[{"$eq":5000},{"sal":{"$eq":1500}}]}}

Advantages of Using FilterObject:

1. Simplified Data Filtering: Simplifies the complexity of data filtering, making it easy for developers to filter queries without the need for complex SQL.

2. Reduced Network Load: By allowing clients to specify precisely the data they need, unnecessary data transfer is minimized.

3. Dynamic Filtering: Including FilterObject in the API request enables clients to dynamically adjust filtering criteria based on their specific requirements.

The apex_http package offers PL/SQL procedures to send files (BLOBs or CLOBs) directly to the client browser for download. It handles MIME types, filenames, and ensures the download process is clean by clearing previous output buffers and stopping the APEX engine after the file is sent.

Downloading a blob (binary file) example

declare
    l_file blob;
    l_content_type varchar2(4000);
    l_filename varchar2(4000);
begin
    select blob_content, mime_type, filename
      into l_file, l_content_type, l_filename
      from apex_application_temp_files
     where name = :p1_file;

    apex_http.download(
        p_blob         => l_file,
        p_content_type => l_content_type,
        p_filename     => l_filename
    );
end;

Downloading a clob (text file) example

declare
    l_text clob;
begin
    l_text := 'APEX BLOG';
    apex_http.download(
        p_clob         => l_text,
        p_content_type => 'text/plain',
        p_filename     => 'mytext.txt'
    );
end;

When you call apex_http.download, it clears any previous output buffer, ensuring that only the intended file is delivered to the user and no other content is included. After the file download is initiated, the procedure automatically calls apex_application.stop_apex_engine, which cleanly ends the page process and prevents further processing or output.

Starting with APEX 24.1, there is also support for a "download" dynamic action, making it even easier to trigger file downloads directly from the user interface without writing custom PL/SQL code. Additionally, you can control whether the file opens directly in the browser or is downloaded as an attachment by using the p_is_inline parameter setting it to true opens the file inline, while false prompts a download.

How to enable APEX_DEBUG?

There are several ways to enable debug mode in APEX:

Developer toolbar: Click the "debug" button in the developer toolbar while running your application.

URL parameter: Append &p_debug=YES or &p_debug=LEVEL (where level is 1–9) to your application URL for different verbosity levels.

Application property: Set the application’s debug property to "yes" for persistent debug logging.

APEX_DEBUG API: Use apex_debug.enable in PL/SQL to programmatically enable debugging for a session.

Logging Dynamic Values and Parameters

apex_debug.info('My Debug message, showing order_id: %s', p_order_id);
apex_debug.warn('unexpected status: %s', p_status);
apex_debug.error('Warning, my debug error: %s', sqlerrm);

View the debug messages

To view the debug messages, click on "View Debug" in the dev toolbar, or go to Utilities / Debug Messages, or also running the following query:

select *
from apex_debug_messages

Logging in Loops and Bulk Operations

Be careful when logging too many messages, for example, inside a loop. Be aware of APEX flood control, which limits the number of debug messages per page view (the default is 50,000).

You can check this limit with the query below (run as sys).

select *
from APEX_INSTANCE_PARAMETERS
where name = 'DEBUG_MESSAGE_PAGE_VIEW_LIMIT';

Debugging Outside APEX Applications

You can use apex_debug in standalone PL/SQL scripts or jobs:

apex_session.create_session(p_app_id=>101, p_page_id=>1, p_username=>'RODRIGO');
apex_debug.enable(apex_debug.c_log_level_info);
apex_debug.info('My debug message from sql developer');
apex_session.detach;

The APEX debug feature is very powerful and useful. To help you troubleshoot issues, enable debug mode and use the browser’s developer tools to inspect AJAX calls and dynamic actions. The debug log will display the sequence and timing of events, helping you identify problems with client-side interactivity.

Generating a PNG barcode

declare
  l_output blob;
begin
  l_output := apex_barcode.get_code128_png(
                  p_value            => 'https://apexblog.dev/',
                  p_scale            => 1,
                  p_foreground_color => '#4cd964',
                  p_background_color => '#c7c7cc' );

end;

Generating a SVG barcode

declare
  l_output clob;
begin
  l_output := apex_barcode.get_code128_svg(
                  p_value            => 'https://apexblog.dev/',
                  p_foreground_color => '#4cd964',
                  p_background_color => '#c7c7cc' );

  dbms_outout.put_line( l_output );
end;

We can also generate in a EAN8 format using apex_barcode.get_ean8_png and apex_barcode.get_ean8_svg

Embedding barcodes in APEX pages

• for svg: use a pl/sql dynamic content region to output the svg directly.

• for png: store the blob in a table and use an image item or blob download link to display or let users download the barcode.

In conclusion, the apex_barcode package in Oracle APEX 24.2 provides a robust and flexible solution for generating barcodes in your applications. With support for both SVG and PNG outputs, it caters to a wide range of needs, whether for web integration, print, or other systems. By leveraging this PL/SQL-driven package, you can easily embed barcodes in APEX pages. Whether you need to display barcodes directly on a page or allow users to download them, the apex_barcode package simplifies the process, making it an essential tool for modern APEX dev.

As modern applications increasingly depend on the flexibility of semi-structured data and the seamless integration offered by RESTful services, understanding JSON is more important than ever.

With Oracle Database 21c and its subsequent versions, you have the advantage of managing and updating JSON documents directly within your tables. Thanks to powerful native SQL functions, there's no need for complex PL/SQL or manual parsing anymore.

Why use native JSON DML operations?

• Performance: Native functions like json_transform and json_mergepatch are optimized for speed.

• Simplicity: Update, insert, or remove fields in json documents with a single sql statement.

• Flexibility: Works with columns of type json, clob, varchar2, or blob

To start lets create a simple table with only two columns

create table orders (
    order_id number 
        generated by default on null as identity
        constraint orders_pk primary key
        not null,
    order_data clob
);

and insert a JSON into order_data

insert into orders(order_data) values ('{
  "order_id": 1001,
  "customer": {
    "customer_id": 501,
    "name": "jane smith",
    "email": "jane.smith@example.com"
  },
  "items": [
    {
      "item_id": 2001,
      "product": "laptop",
      "quantity": 1,
      "price": 1200.00
    },
    {
      "item_id": 2002,
      "product": "mouse",
      "quantity": 2,
      "price": 25.50
    }
  ],
  "status": "processing",
  "order_date": "2025-05-23t14:30:00z",
  "shipping": {
    "address": "123 main street, leeds, uk",
    "method": "express",
    "cost": 15.00
  },
  "last_updated": "2025-05-23t14:30:00z"
}
');

If we run a simple query (select order_data from orders), we can see the full JSON. However, we can easily filter it to show only the important data using the code below. In the example, I only want to see the order status.

select order_id,
       json_value(order_data, '$.status') as status
from orders
where order_id = 1;

Using json_transform, we can easily update this field.This updates the status field to "shipped" for order 1. if the field doesn't exist, it is created (upsert behavior)

update orders
set order_data = json_transform(order_data,
    set '$.status' = 'shipped')
where order_id = 1;

You can also update several fields in a single statement. Only the changed fragments of the json are rewritten for efficiency.

update orders
set order_data = json_transform(order_data,
    set '$.status' = 'delivered',
    set '$.last_updated' = systimestamp)
where order_id = 1;

We can remove a field from json. The code below removes the last_updated field if it exists.

update orders
set order_data = json_transform(order_data,
    remove '$.last_updated')
where order_id = 1;

It's also possible to update the JSON using json_mergepatch with a single set statement by passing the part of the JSON that needs to be updated.

update orders
set order_data = json_mergepatch(order_data, '{"status":"delivered"}')
where order_id = 1;

Best Practices

• Prefer native json functions (json_transform, json_mergepatch) over manual pl/sql parsing for better performance and maintainability.

• Use the json data type (oracle 21c+) for optimal storage and partial updates.

What’s data masking?

Data masking is the process of permanently replacing sensitive data with fake but realistic-looking data to protect confidential information. This is used to protect sensitive data to comply with privacy laws and standards. This process should be irreversible and realistic enough for non-production use while maintaining the app functionality.

Key Features of Data Masking

1. Predefined Masking Formats: Oracle Data Safe offers a comprehensive set of predefined masking formats for common sensitive data types such as names, Social Security numbers, credit card numbers, and email addresses. These formats ensure that masked data is realistic and passes specific validation checks, such as Luhn validation for credit card numbers.

2. Custom Masking Formats: Users can create custom masking formats tailored to their specific needs. This flexibility allows organizations to mask data in ways that are unique to their business requirements.

3. Conditional Masking: Data can be masked based on predefined conditions, allowing for more nuanced control over how data is protected.

4. Reversible Masking: While most masking formats are irreversible to ensure security, Oracle Data Safe supports reversible masking through encryption, allowing authorized users to restore the original data when necessary.

5. Multi-Database Support: Data masking can be applied across various Oracle database versions and environments, including on-premises and cloud databases

It’s possible to use this feature on-premises or in OCI. The example in this blog is on how to use it in OCI.

Masking Policies: To begin, we need to create policies to protect the data.

On Oracle Cloud, go to Oracle Database and under Data Safe, select Data Masking. On Related Resources, select Masking Policies.

We can either upload a previously saved masking policy or create a new one. We are going to create one.

In this step, we can use a sensitive data model or manually select the sensitive data associated with our target database. In this blog, we are using the second option; however, in my next blog, I will show how to use OCI to generate a sensitive data model.

With the masking policy created, we can start adding the columns we want to mask. After clicking on "Add Column," we can select the schema, table, and columns we want to mask. We will mask ENAME, SAL, and HIREDATE, selecting the sensitive type according to the type of data.

After clicking on "Add Columns," we will be able to confirm the mask used for each column.

With the police done we can go back to the main Data Masking page and do the “Pre-Masking Check“, this will insure the database is ready for the masking. One of the checks looks for the database permissions for the users that is running the masking. By default, an Autonomous Database comes with a database account specifically created for Oracle Data Safe named DS$ADMIN. The roles that you grant to this account determine the Oracle Data Safe features that you can use with your Autonomous Database.

For an Autonomous Database, all roles are already granted by default, except for DS$DATA_MASKING_ROLE and DS$SQL_FIREWALL_ROLE. To grant the role we can run the command below.

EXECUTE DS_TARGET_UTIL.GRANT_ROLE('role_name');

After the “Pre-Masking Check“, we can now execute the Data Masking, but before that, let's look at the data to compare it with after the masking is done.

We can now go to the main page and click on “Mask Sensitive Data.” Below, we can see the results.

Returning to the application, we can now see that the data has been changed, and the columns ENAME, SAL, and HIREDATE have different data.

As APEX applications grow in complexity, keeping track of database object dependencies becomes increasingly challenging. The new APEX_APP_OBJECT_DEPENDENCY API addresses several common concerns:

• Identifying which database objects are used by specific applications

• Determining if dropping a schema object might break an application

• Verifying if all SQL and PL/SQL in every page of an application runs without errors

How It Works

Simply run the following PL/SQL code in your workspace. This will scan your entire app, analyzing references to schema objects in regions, SQL queries, PL/SQL processes, and even plugins

BEGIN
    apex_app_object_dependency.scan ( p_application_id => :app_id );
END;

The results of the scan are saved until:

• a new scan initiates

• apex_app_object_dependency.clear_cache is called

• the Oracle APEX instance is upgraded

Viewing the results

After running the scan, you can query the results using three new views:

1. APEX_USED_DB_OBJECTS: This view lists each schema object used at least once in your app:

    select
      referenced_type, referenced_owner,
      referenced_name, referenced_sub_name,
      usage_count
    from apex_used_db_objects
    where application_id = :app_id;
   

2. APEX_USED_DB_OBJECT_COMP_PROPS: This view shows each component property in your app that references at least one schema object:

    select
      page_id,
      component_type_name, component_display_name,
      property_group_name, property_name
    from apex_used_db_object_comp_props
    where application_id = :app_id;
   

3. APEX_USED_DB_OBJ_DEPENDENCIES: This view displays all DB objects referenced by each component property:

    select
      page_id,
      component_type_name, component_display_name,
      property_group_name, property_name,
      code_fragment,
      referenced_type, referenced_owner,
      referenced_name, referenced_sub_name
    from apex_used_db_obj_dependencies
    where application_id = :app_id;
   

Limitations

• Results are wiped when APEX is upgraded to a new version, requiring a re-scan of applications

• The reports do not include recursive dependencies (e.g., underlying tables of a view)

• Dependencies arising from dynamic SQL or PL/SQL (using "execute immediate") are not reported.

Improving the scan

The dependency analyzer specifically identifies connections to individual functions and procedures within packages that have been compiled with PL/Scope. Before starting the analysis, you can choose to recompile the relevant schema(s) with PL/Scope enabled to improve detection capabilities

alter session set plscope_settings='identifiers:all';
exec sys.dbms_utility.compile_schema(user, true);
alter session set plscope_settings='identifiers:none';

1. Expand and collapse all: I miss a dynamic action to collapse and expand all to make it easy to find a region on a page with multiple regions. We have the dynamic action to colapse tree but not regions.

2. Save the collapsible state beyond the session: Currently, we can save the collapsible state, but unfortunately, it's only saved for the session. If I collapse a region that isn't important to me, logging off and logging in again resets my chosen state.

In the video below, I have a page with 4 collapsible regions and two buttons that can collapse and expand all regions at the same time. If only the 4th region is important to me, when I collapse all, I can easily open wihout scrooling. In the second part of the video, I log off and log in again, and instead of resetting, the state of the region is saved.

To add those features, I’ve created the JavaScript below where I use apex.storage to save the collapsible region state when users click to expand or collapse. When the page loads, this JS also restores the regions to the saved state.

// Function to collapse all collapsible regions
window.collapseAll = function() {
    if (!apex.storage.hasLocalStorageSupport()) return;

    const storage = apex.storage.getScopedLocalStorage({
        applicationId: apex.env.APP_ID,
        pageId: apex.env.PAGE_ID,
        usePageId: true
    });

    $('.a-Collapsible').each(function() {
        const regionId = $(this).attr('id');
        storage.setItem(regionId, 'C');
        $(this).collapsible('collapse');
    });
};

// Function to expand all collapsible regions
window.expandAll = function() {
    if (!apex.storage.hasLocalStorageSupport()) return;

    const storage = apex.storage.getScopedLocalStorage({
        applicationId: apex.env.APP_ID,
        pageId: apex.env.PAGE_ID,
        usePageId: true
    });

    $('.a-Collapsible').each(function() {
        const regionId = $(this).attr('id');
        storage.setItem(regionId, 'S');
        $(this).collapsible('expand');
    });
};

// Initialization with state restoration
$(function() {
    'use strict';

    // Configure scoped storage  
    const storage = apex.storage.getScopedLocalStorage({  
        applicationId: apex.env.APP_ID,  
        pageId: apex.env.PAGE_ID,  
        usePageId: true  
    }); 

    // Restore states on page load
    $(window).on('apexwindowload', function() {  
        $('.t-Region--hideShow').each(function() {  
            const $region = $(this);  
            const state = storage.get($region.attr('id'));  
            if (state === 'C') {  
                $region.collapsible('collapse', {duration: 0});  
            } else {  
                $region.collapsible('expand', {duration: 0});  
            }  
        });  
    }); 

    // Persist state changes
    $(document).on('apexaftertoggle', '.t-Region', function(e, data) {  
        const regionId = $(this).attr('id');  
        storage.set(regionId, data.collapsed ? 'C' : 'S');  
    });  

    // Button click handlers
    apex.jQuery(document).on("click", "#EXPAND_BTN", function() {
        expandAll();
    });

    apex.jQuery(document).on("click", "#COLLAPSE_BTN", function() {
        collapseAll();
    });
});

I recommend you create the JavaScript above as a static file and reference it at the app level if you use collapsible regions throughout the app.

For the buttons, create two buttons as the following

Label: Collapse All
Behavior: Redirect to URL
URL: javascript:void(0);
Static ID: COLLAPSE_BTN

Label: Expand All
Behavior: Redirect to URL
URL: javascript:void(0);
Static ID: EXPAND_BTN

Enjoy!

Overriding the Default X button Behavior

1. Define a custom JavaScript function to trigger a custom event when the dialog closes. Add this function to your page's JavaScript (either on the parent page, page 0, or in your global JavaScript file):

function customEvent(event, data) {
    apex.event.trigger(document, event, data);
}

2. In the modal dialog page attributes, navigate to the "Dialog" section and set the "Attributes" property to:

close: function() { 
    customEvent('customDialogClose', {modalPageId: 'MODAL_CLOSE_FIXED'});
}

This overrides the default close behavior and triggers a custom event named "customDialogClose" when the dialog is closed, including when the "X" button is clicked

Creating a Dynamic Action on the Parent Page

3. On the parent page, create a new dynamic action with the following settings:

• Event: Custom

• Custom Event: customDialogClose

• Selection Type: JavaScript Expression

• JavaScript Expression: document

4. Add the desired actions to this dynamic action, such as refreshing regions, setting item values, or executing JavaScript code

Additional Considerations

• This approach will handle both the "X" button click and other cancellation methods, such as using a dynamic action with a "Cancel Dialog" action.

• The custom event will be triggered on the parent page, allowing you to perform actions after the dialog is closed.

• You can use the data attribute (modalPageId in the example) to differentiate between multiple modal dialogs if needed.

First, we need to create a QR CODE item. In my example, the item is called P2_QRCODE, with the static value of www.apexblog.dev. When we point the camera at it, it will open the browser and go to this blog.

Download the QR Code

To enable downloading the QR Code as an image, I will use a bit of JavaScript to capture a screenshot of the item and save it as a JPG. I am currently hardcoding the image filename, but we can also add a new parameter to the function to make it dynamic.

function downloadQrcode(item) {
var svgElement = apex.item(item).node.querySelector("svg"),
    itemElement = apex.item(item);
    if (!svgElement) {
        console.error("Invalid QRCODE");
    }
    var svgString = new XMLSerializer().serializeToString(svgElement);
    // set larger canvas dimensions
    var canvas = document.createElement('canvas');
    canvas.width = itemElement.offsetWidth;
    canvas.height = itemElement.offsetHeight;
    var ctx = canvas.getContext("2d");

    // clear background
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svgBlob = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svgBlob);

    img.onload = function() {
        // calculate scaling to fit the entire QR code
        var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
        var x = (canvas.width - img.width * scale) / 2;
        var y = (canvas.height - img.height * scale) / 2;

        // draw the image centered and scaled
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
        // Create an image element and download it
        var jpg = canvas.toDataURL('image/jpeg', 1.0);
        var link = document.createElement("a");
        document.body.appendChild(link);
        link.href = jpg;
        link.download = 'qrcode.jpg';
        link.click();
        document.body.removeChild(link);
        DOMURL.revokeObjectURL(url);
    };

    img.src = url;
}

We can now copy and paste this function into the page's Function and Global Variable Declaration section or add it to a JavaScript file, as long as it is accessible on the page.

The next step is to create a button and a dynamic action that triggers when we click the button. Add an action to this dynamic action of type Execute JavaScript Code and include the code below.

downloadQrcode("P2_QR_CODE");

When we click the button, the qrcode.jpg file is downloaded.

Change QR Code Size

If we inspect the QR Code using the browser's developer tools, we will notice that each size has a different CSS class.

• small: a-QRCode--sm

• medium: a-QRCode--md

• large: a-QRCode--lg

By changing the class, the size will also change. To manage this, let's do the following:

1. Create a Radio Group with the following static values

   

2. Create an on-change dynamic action to trigger when you click on the radio group item.

3. Add an Execute JavaScript Code action with the code below. This JavaScript code will get the chosen value from the Radio Group and change the QR CODE item's class accordingly.

    var elementId = this.affectedElements[0].id
    size = apex.item(this.triggeringElement.id).getValue();
   
    if (size == 'S'){
        apex.item(elementId).node.className = "a-QRCode a-QRCode--sm";
    }else if (size == 'M'){
        apex.item(elementId).node.className = "a-QRCode a-QRCode--md";
    }else if (size == 'L'){
        apex.item(elementId).node.className = "a-QRCode a-QRCode--lg";
    }
   

Saving the css/js file

Upload the JavaScript File to APEX Static Files

1. Navigate to Shared Components:

   • From the Application Builder, select the application you want to add the JS/CSS file to.

   • Click on Shared Components in the application menu.

   • Under the Files and Reports section, click on Static Application Files.

2. Upload/Create the File:

   • Click on the Create File button.

   • Choose the file from your local machine or click on create to open the editor

   • Optionally, you can create a directory to keep your files organized. For example, you might create a directory called js and upload the javascript files into this directory.

   • Click Create to add the file to your application’s static files.

     

Reference the JavaScript File in Your Application

After uploading the file, you need to reference it in your application so it can be utilized across various pages.

In this example, I created the app.js JavaScript file, and APEX automatically created the minified version of this file. We should also use the minified version to reduce memory usage and loading time.

1. Navigate to User Interface Attributes:

   • From the Application Builder, click on Shared Components.

   • Under the User Interface section, click on JavaScript or CSS depending on your file type.

Add the file path pointing to the file we just created.

Check if the file is loaded

• Run the Application:

  • Add the following code to the app.js file

      console.log('app.js loaded successfully!');
    

  • Run your application.

  • Open the browser’s Developer Tools (usually accessed by pressing F12) and check the Console and you chould see the message app.js loaded successfully!

Using version control

When we don't use version control, after a change to app.js, the browser can cache the file and the changes won't be available when running the app. Users will need to manually clear the cache. To avoid that, use version control. Every time you make changes to the app and release it, the browsers will be forced to refresh the cached file when running the app.

Version control for static files in APEX is implemented by appending ?version=#APP_VERSION# to file URLs, ensuring users always receive the latest versions of CSS and JavaScript files without manual cache clearing.

When setting the file URL instead of

#APP_FILES#js/app#MIN#.js

we should use

#APP_FILES#js/app#MIN#.js?version=#APP_VERSION#

In my use case below, using a public API (https://postcodes.io), I will extract and save the data related to a postcode.

To begin, we need to create a table column to store the JSON Document this could be either:

• JSON datatype - Oracle 21c Database

• VARCHAR2 - small documents

• CLOB

• BLOB

For Oracle 21c users, JSON datatype is the best option; however, for other database versions, the best option is to use a BLOB column, as it stores the exact JSON document without any character set conversions, resulting in less storage in most cases. VARCHAR2 is only recommended when we can ensure that the JSON document won't exceed the maximum size of 32767.

create table location (
    id                 number generated by default on null as identity 
                          constraint location_id_pk primary key,
    postcode              varchar2(10),                               
    postcode_json_content blob
);

and a trigger calling the API and save the request as a blob.

create or replace trigger "BI_LOCATION"   
 before insert on "LOCATION"               
 for each row  
declare  
 l_json_postcode blob;
begin   
     l_json_postcode := apex_web_service.make_rest_request_b(
       p_url => 'https://api.postcodes.io/postcodes/'||:new.postcode,
       p_http_method => 'GET');
       :NEW.postcode_json_content := l_json_postcode;
end;

If we insert any valid postcode at this point, the trigger will call the API and save the blob content, but it is only a blob content. If we try to save an image in postcode_json_content, that will work because there is nothing to prevent only JSON valid data. To solve that, we add a constraint as follows.

alter table LOCATION
 add constraint postcode_data_json 
 check ( postcode_json_content is json );

The column postcode_json_content now only accepts valid JSON objects. Now we can add some data.

insert into location(postcode) values ('SW1A1AA');

If a valid JSON is returned from the API, we have the following

select to_clob(postcode_json_content) postcode_json_content from location;

{
    "status": 200,
    "result": {
        "postcode": "SW1A 1AA",
        "quality": 1,
        "eastings": 529090,
        "northings": 179645,
        "country": "England",
        "nhs_ha": "London",
        "longitude": -0.141588,
        "latitude": 51.501009,
        "european_electoral_region": "London",
        "primary_care_trust": "Westminster",
        "region": "London",
        "lsoa": "Westminster 018C",
        "msoa": "Westminster 018",
        "incode": "1AA",
        "outcode": "SW1A",
        "parliamentary_constituency": "Cities of London and Westminster",
        "admin_district": "Westminster",
        "parish": "Westminster, unparished area",
        "admin_county": null,
        "admin_ward": "St James's",
        "ced": null,
        "ccg": "NHS North West London",
        "nuts": "Westminster",
        "codes": {
            "admin_district": "E09000033",
            "admin_county": "E99999999",
            "admin_ward": "E05000644",
            "parish": "E43000236",
            "parliamentary_constituency": "E14000639",
            "ccg": "E38000256",
            "ccg_id": "W2U3Z",
            "ced": "E99999999",
            "nuts": "TLI32",
            "lsoa": "E01004736",
            "msoa": "E02000977",
            "lau2": "E09000033"
        }
    }
}

Now we can easily extract the data and specify the correct data type to be returned.

select l.postcode_json_content.result.latitude.number() as latitude,
        l.postcode_json_content.result.longitude.number() as longitude,
        l.postcode_json_content.result.region.string() as region,
        l.postcode_json_content.result.country.string() as country,
        l.postcode_json_content.result.parish.string() as longitude
   from location l

Important! We need to prefix the columns alias to avoid the error below.

ORA-00904: "POSTCODE_JSON_CONTENT"."RESULT"."LONGITUDE": invalid identifier

Installation

1. Download Stats Counter

2. Import template_component_plugin_com_rodrigomesquita_statscounter.sql file into your application.

Usage

1. Create a page item

2. Choose Stats Counter [Plugin] as an item type

Responsive and perfect for all screens

When using small screens, the layout adjusts to a more attractive view.

Adapt to any theme style

Don't worry if your user prefers dark mode; it will look awesome too.

Demo

Clique here so see it working.

To show how it works, I will use the vertical timeline TC plugin. To learn more about this plugin, click here.

In this demo, the plugin is used to display the timeline of a shopping order.

We want to highlight when the order is canceled or delivered. For this, we are going to call the Badge plugin inside the Vertical Timeline. To call a plugin, we use the 'with/apply' template directive. This is explained in the blog post The Power of APEX Template Directives.

We first need to identify where is the text that we want to change:

We now know that the text we want to change comes from the description. By looking at the plugin custom attributes, we can see that the description is identified by VT_DESC

Looking at the code, we can now easily identify where we need to make a change and call the bagde plugin

<div class="vt-item-text">#VT_DESC#</div>

{if APEX$IS_LAZY_LOADING/}
  <div><span aria-hidden="true" class="fa fa-refresh fa-2x fa-anim-spin"></span></div>
{else/}
    <span class="fa #VT_ICON# vt-icon" aria-hidden="true"></span>
       <div class="vt-header">
            <div class="vt_header_text">#VT_TEXT#<br> #VT_SUBTEXT#</div>
            <div>{if APEX$HAS_ACTION_BUTTONS/} #MENU_ACTION# {endif/}</div>
       </div>
          <div class="vt-item-text">#VT_DESC#</div>
{endif/}

The code will then be changed by adding the with/apply for the Order Canceled (using danger state) and The order has been delivered (using success state).

{if APEX$IS_LAZY_LOADING/}
  <div><span aria-hidden="true" class="fa fa-refresh fa-2x fa-anim-spin"></span></div>
{else/}
    <span class="fa #VT_ICON# vt-icon" aria-hidden="true"></span>
       <div class="vt-header">
            <div class="vt_header_text">#VT_TEXT#<br> #VT_SUBTEXT#</div>
            <div>{if APEX$HAS_ACTION_BUTTONS/} #MENU_ACTION# {endif/}</div>
       </div>
           {case VT_DESC/}
       {when Order Canceled/}
            {with/}
            LABEL:=
            VALUE:=#VT_DESC#
            STATE:=danger
            ICON:=fa-times-circle-o
            LABEL_DISPLAY:=N
            STYLE:=t-Badge--md
            SHAPE:=t-Badge--circle
            {apply THEME$BADGE/}  
        {when The order has been delivered/}
            {with/}
            LABEL:=
            VALUE:=#VT_DESC#
            STATE:=success
            ICON:=fa-times-circle-o
            LABEL_DISPLAY:=N
            STYLE:=t-Badge--md
            SHAPE:=t-Badge--circle
            {apply THEME$BADGE/}                     
       {otherwise/}
          <div class="vt-item-text">#VT_DESC#</div>
    {endcase/}
{endif/}

and finally we have the below:

and

Template Components can be used on any component with the HTML Expression, and we have the following options:

1. IF: For the IF example we are going to use the DISABLE_FLAG column. If there the column is not null will return Yes else NO.

   

   Token Modifiers

   | Condition | Directive | | --- | --- | | if_exists_and_true | {if ITEM/} | | if_exists | {if ?ITEM/} | | if_not_exists_or_false | {if !ITEM/} | | if_not_exists | {if !?ITEM/} | | if_not_false | {if =ITEM/} | | if_exists_and_false | {if !=ITEM/} |

2. CASE: For the CASE we are going to use the GENDER column. When M we will show the fa-male icon and fa-female when the value is F.

   

3. LOOP: For the LOOP, the column BADGES contains colon-separated values representing all the badges the user has. We are going to break that into <li> elements and add the fa-trophy icon.

   

   The code above will return the following:

   

4. WITH and APPLY allow us to add predefined template component plugins and use them inside a template component (nested template component) or in HTML Expressions. In the example below, we will use the BADGE template component plugin to show the value of the FULL_NAME column.

   

   The code above will return the following:

   

   To help us build the WITH/APPLY and add all the custom attributes for each plugin, Matt Mulvaney created the Template Component With/Apply Generator This tool is very helpful for generating the WITH/APPLY for each plugin

   

   ##

Introducing the Vertical Timeline: Witness how a plugin can be created with minimal code in no time.

Looks pretty cool, and it's all done with just 10 lines of HTML and a touch of CSS.

{if APEX$IS_LAZY_LOADING/}
  <div><span aria-hidden="true" class="fa fa-refresh fa-2x fa-anim-spin"></span></div>
{else/}
    <span class="fa #VT_ICON# vt-icon" aria-hidden="true"></span>
       <div class="vt-header">
            <div class="vt_header_text">#VT_TEXT#<br> #VT_SUBTEXT#</div>
            <div>{if APEX$HAS_ACTION_BUTTONS/} #MENU_ACTION# {endif/}</div>
       </div>
    <div class="vt-item-text">#VT_DESC#</div>
{endif/}

Additionally, it comes with an action menu. In the demo, I've set up five menu items, each with its own server-side condition to show selectively on specific timeline entries, based on the flag column in the query below.

Sample Query

SELECT
  'Order Received' AS event_text,
  '01-AUG-2023' AS event_date,
  '9:00 AM'  as event_time,
  'fa-shopping-cart' as card_icon,
  'Y' edit_flag,
  'Y' cancel_flag,
  'N' track_flag,
  'N' review_flag,
  'N' return_flag
FROM DUAL
UNION ALL
SELECT
  'Order is being processed in our warehouse' AS event_text,
  '02-AUG-2023' as event_date,
  '10:00 AM'  as event_time,
  'fa-package' as card_icon,
  'N' edit_flag,
  'Y' cancel_flag,
  'N' track_flag,
  'N' review_flag,
  'N' return_flag
FROM DUAL
UNION ALL
SELECT
  'Your order is shipped' AS event_text,
  '02-AUG-2023' as event_date,
  '1:00 PM' as event_time,
  'fa-plane' as card_icon,
  'N' edit_flag,
  'N' cancel_flag,
  'Y' track_flag,
  'N' review_flag,
  'N' return_flag
FROM DUAL
UNION ALL
SELECT
  'Your order has arrived in Leeds - UK' AS event_text,
  '03-AUG-2023' as event_date,
  '2:00 PM' as event_time,
  'fa-map-marker-o' as card_icon,
  'N' edit_flag,
  'N' cancel_flag,
  'Y' track_flag,
  'N' review_flag,
  'N' return_flag
FROM DUAL
UNION ALL
SELECT
  'Your order has been pickup by the driver' AS event_text,
  '03-AUG-2023' as event_date,
  '03:00 PM' as event_time,
  'fa-truck' as card_icon,
  'N' edit_flag,
  'N' cancel_flag,
  'Y' track_flag,
  'N' review_flag,
  'N' return_flag
FROM DUAL
UNION ALL
SELECT
  'The order has been delivered' AS event_text,
  '03-AUG-2023' as event_date,
  '06:00 PM' as event_time,
  'fa-home' as card_icon,
  'N' edit_flag,
  'N' cancel_flag,
  'N' track_flag,
  'Y' review_flag,
  'Y' return_flag
FROM DUAL

Installation

1. Download Vertical Timeline

2. Import template_component_plugin_com_rodrigomesquita_vertical_timeline.sqlfile into your application.

Usage

1. Create a page item

2. Choose Vertical Timeline [Plugin] as a template component type

Configuration

Demo

Clique here to see in action.