Barcode and QR Code Generation in Oracle APEX

 

Introduction

In modern applications, Barcodes and QR Codes are widely used to identify products, track inventory, enable quick access to information, and simplify scanning operations.

Oracle APEX does not provide built-in barcode or QR generation components, but with the help of JavaScript libraries and Interactive Reports, we can implement this feature efficiently.

In this blog, I explain how I implemented Barcode Generator and QR Code Generator in Oracle APEX 24.2, how data is stored and fetched from database tables, and how barcodes and QR codes are rendered dynamically in reports.

Why Barcode and QR Code Are Needed

• Unique identification of products

• Faster scanning compared to manual entry

• Reduced human errors

• Easy integration with scanners and mobile devices

• Useful for inventory, billing, logistics, and asset tracking

  Flow

1. Create a Form Page to enter product details

2. Save product data into database tables

3. Display data using Interactive Report / Classic Report

4. Generate Barcode and QR Code dynamically using JavaScript libraries

5. Render the output inside the report region

Tables Used

Examples:

• BARCODE – stores product details for barcode generation

• QR_CODE – stores product details for QR code generation

Data Fetching Query (Barcode)

SELECT 
    product_id,
    product_name,
    product_code,
    '<svg class="barcode"
        jsbarcode-format="CODE39"
        jsbarcode-value="' || product_code || '"
        jsbarcode-text="' || product_code || '-' || product_name || '"
        jsbarcode-textmargin="5"
        jsbarcode-fontoptions="bold">
     </svg>' AS barcode_svg
FROM barcode;

Explanation

• <svg> acts as a placeholder for barcode rendering

• jsbarcode-value holds the actual barcode data

• jsbarcode-text displays readable text below the barcode

• Barcode is rendered later using JavaScript

Data Fetching Query (QR Code)

SELECT
    product_name,
    product_code,
    '<div class="qr-code" data-value="' 
        || APEX_ESCAPE.HTML_ATTRIBUTE(product_code) 
        || '"></div>' AS qr_code_html
FROM QR_code;

Explanation

• <div class="qr-code"> acts as a placeholder

• data-value stores the QR content safely using APEX_ESCAPE

• QR code is generated dynamically on page load

Static Application Files Setup

To render barcodes and QR codes, JavaScript libraries must be uploaded.

Upload the following files to Static Application Files:

Download from official source: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js
(Download once → upload to APEX)
Download from official source: https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
(Download once → upload to APEX)

Page JavaScript File URLs

Add the following in Page → JavaScript → File URLs:

#APP_FILES#JsBarcode.all.min.js
#APP_FILES#qrcode.min.js

---

JavaScript Code (Execute when Page Loads)

Add the following code in

Page → JavaScript → Execute when Page Loads:

// Initialize all barcodes
JsBarcode(".barcode").init();
// Generate QR codes for all placeholders in the report
document.querySelectorAll('.qr-code').forEach(function(div) {
    if (div.dataset.value) {
        new QRCode(div, {
            text: div.dataset.value,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    }
});

Output Rendering

After page load:

• Barcodes are rendered inside <svg class="barcode">

• QR Codes are generated inside <div class="qr-code">

• Both are displayed properly in the report region

No page refresh or manual trigger is required.

Issues Faced and Fixes

1. Barcode Not Rendering

Cause:

JavaScript file not loaded or wrong file path.

Fix:

Verified static application file path and added correct reference in Page JavaScript File URLs.

2. QR Code Not Displaying in Report

Cause:

Special characters breaking HTML rendering.

Fix:

Used APEX_ESCAPE.HTML_ATTRIBUTE() to safely pass values.

3. JavaScript Not Executing

Cause:

Code added in wrong section.

Fix:

Moved code to Execute when Page Loads instead of Function and Global Variable Declaration.

Advantages of This Approach

• No external server dependency

• Works fully inside Oracle APEX

• Lightweight and fast rendering

• Easy to customize barcode format and QR size

• Suitable for reports, cards, and dashboards

Conclusion

Using JsBarcode and QRCode.js, we can efficiently implement barcode and QR code generation in Oracle APEX 24.2.

This approach is simple, scalable, and ideal for real-time applications such as inventory systems, billing modules, and product tracking solutions.

This implementation helped me dynamically generate and display barcodes and QR codes directly from database values without complex plugins or external APIs.