Introduction

With Oracle APEX 23.2, the Oracle APEX team introduces the new QR Code item type and the new apex_barcode PL/SQL API. Previously, it was possible to generate QR codes in Oracle APEX, but it was necessary to use a third-party library. Now everything is fully integrated, and you can implement it in just a few minutes. Let's see how!

All the examples in this blog post can be found here

Using the new QR Code item type

Basic configuration

Using the new QR Code item type is simple: go to your page designer, right-click on the tree or drag it from the item panel into the layout. Then select the QR Code type and choose from 3 different sizes (small, medium and large) and 6 different data types (plain text, URL, phone, email, SMS, geolocation).

Here's a screenshot of what it looks like in the Oracle APEX builder

Here's how it looks for the three different sizes (S, M and L)

Advanced configuration

Size of the QR code

QR code size can be controlled using a CSS variable called --a-qrcode-size . The three built-in sizes are defined by three other CSS variables:

• --a-qrcode-size-sm value 8rem

• --a-qrcode-size-md value 16rem

• --a-qrcode-size-lg value 32rem

Here are a few examples you can use to control code size using CSS only

/*
Custom size for a specific item
*/
#PX_ITEM_NAME {
    --a-qrcode-size: 4rem;
}

/*
Custom size for all items (can be use at the app or page level
*/
:root {
    --a-qrcode-size: 4rem;
}
/*
Customize the default built-in sizes (can be use at the app or page level
*/
:root {
    --a-qrcode-size-sm: 4rem;
    --a-qrcode-size-md: 8rem;
    --a-qrcode-size-lg: 12rem;
}

Coloring your QR codes

While working on today's post, I looked at the JavaScript source (item.QRcode.js) and found something interesting. The markup expects to find two attributes controlling foreground color and background color

My reaction was to wonder if I was missing these two attributes. The answer is no, so let's just use the custom attributes... I opened the page builder and tried to find the custom attributes but they're not available 😢

I don't know why there are no declarative or custom attributes for this, but it's still possible to define it using the JavaScript API by using the following code

// Defining the foreground color
apex.items.PX_ITEM_NAME.foregroundColor = "#00a6ff";
// Defining the background color
apex.items.PX_ITEM_NAME.backgroundColor = "#001d88";

Here's a short demonstration of how it works. It's pretty cool, isn't it?

Using the new PL/SQL API

The new PL/SQL API will enable you to generate not only QR codes (which is what the item uses), but also - and this is a pleasant surprise - code 128 and EAN 8. The following paragraph explains how to use it.

QR code generation

You can generate QR codes in two different formats (SVG and PNG) while the first function get_qrcode_svg will return a clob, the second one get_qrcode_png will return a blob.

declare
    l_svg clob;
    l_png blob;
begin
    l_svg := apex_barcode.get_qrcode_svg(
        p_value            => 'https://lmoreaux.hashnode.dev/', 
        p_size             => apex_barcode.c_default_size, -- size in pixel (number)
        p_quiet            => apex_barcode.c_default_quiet, -- blank area around the QR code (positive integer)
        p_eclevel          => apex_barcode.c_eclevel_type_high, -- error correction level ('L', 'M', 'Q' or 'H')
        p_foreground_color => apex_barcode.c_default_foreground_color, -- hexadecimal color
        p_background_color => null -- hexadecimal color
    );

    l_png := apex_barcode.get_qrcode_png(
        p_value            => 'https://lmoreaux.hashnode.dev/',
        p_scale            => apex_barcode.c_default_scale, -- PNG scale (integer 1-10)
        p_quiet            => apex_barcode.c_default_quiet, -- blank area around the QR code (positive integer)
        p_eclevel          => apex_barcode.c_eclevel_type_high, -- error correction level ('L', 'M', 'Q' or 'H')
        p_foreground_color => apex_barcode.c_default_foreground_color, -- hexadecimal color
        p_background_color => null -- hexadecimal color
    );
end;

Code 128 generation

Code 128 is a widely used barcode format, and we can now generate it natively in our applications. It's really exciting!

Here is the code to generate the SVG or the PNG version

declare
    l_svg clob;
    l_png blob;
begin
    l_svg := apex_barcode.get_code128_svg(
        p_value            => '123456789', 
        p_size             => apex_barcode.c_default_size, -- size in pixel (number)
        p_foreground_color => apex_barcode.c_default_foreground_color, -- hexadecimal color
        p_background_color => null -- hexadecimal color
    );

    l_png := apex_barcode.get_code128_png(
        p_value            => '123456789',
        p_eclevel          => apex_barcode.c_eclevel_type_high, -- error correction level ('L', 'M', 'Q' or 'H')
        p_foreground_color => apex_barcode.c_default_foreground_color, -- hexadecimal color
        p_background_color => null -- hexadecimal color
    );
end;

EAN 8 generation

EAN 8, or European Article Number 8, is a compact barcode format that represents numerical data. It consists of eight digits and is commonly used for labeling small consumer products, providing a concise yet information-rich way to identify items.

Here is the code to generate it

declare
    l_svg clob;
    l_png blob;
begin
    l_svg := apex_barcode.get_ean8_svg(
        p_value            => '12345678', 
        p_size             => apex_barcode.c_default_size, -- size in pixel (number)
        p_foreground_color => apex_barcode.c_default_foreground_color, -- hexadecimal color
        p_background_color => null -- hexadecimal color
    );

    l_png := apex_barcode.get_ean8_png(
        p_value            => '12345678',
        p_eclevel          => apex_barcode.c_eclevel_type_high, -- error correction level ('L', 'M', 'Q' or 'H')
        p_foreground_color => apex_barcode.c_default_foreground_color, -- hexadecimal color
        p_background_color => null -- hexadecimal color
    );
end;

Note: as the value should be 8 digits max, an error is raised in case that condition is not true.

Conclusion

Oracle APEX 23.2 brings native support for QR codes and barcodes. As we've explored throughout this blog post, the introduction of the apex_barcode PL/SQL API and the QR Code item type make it incredibly easy to use. Whether it's for efficient inventory management, quick product identification or user experience enhancement, the possibilities are endless and I think this feature will see a lot of use.

Thanks to the Oracle APEX team for bringing new features like this to every new release. Release day is almost like Christmas for me 😅