Barcode Generator in Oracle APEX - Javainhand Tutorial

Hello Friends, Welcome to Javainhand.com, Today I will describe to you about the barcode generator in the Oracle APEX. Basically, I am using a third party library whose name is JSBarcode.

Using of JsBarcode library you can easily generate different types of barcodes. The Barcode generation library has been written in JavaScript code that works in both the browser and on Node.js. Barcode generation libraries support multiple barcode formats.

Basically, I am sharing a JavaScript Library which helps you to generator various barcodes in Oracle APEX.

Let’s Start Today Topic

Barcode Generator in Oracle APEX

In this section, I will tell you some steps that help you implement a barcode generator in the Oracle APEX using javascript.

Step 1:-Use the below link in the page JavaScript File URL section or you can download the minified JsBarcode library and you can use it in your application. See the below screenshot for a better understanding.

https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js

Step 2:-Now we have to create a user input screen where users can enter any information. See the below screenshot for a better understanding. I have created a region, item field and one submit button on my page.

Step 3:- Now we have to create a canvas region or image element for the display Barcode. I have used the canvas element for display barcode.you can also use image elements for display barcode. See the below screenshot for a better understanding.

<canvas id="canvas"></canvas>

Step 4:-Now you have to create a button click dynamic action. Go to the button and right-click on the mouse, choose the dynamic action option. Follow the below dynamic action instruction and see the below screenshot for better understanding.

Identification: Display Barcode // Dynamic Action Name

Event: Click

Selection Type: Button

Button: Submit //Choose your page button name

Now create a true action also

Action: Execute JavaScript Code

Code:   v=apex.item( "P27_INPUT" ).getValue(); //Pass your page item

             JsBarcode("#canvas", v);                             //Pass canvas id

More Customization in Oracle Apex Barcode Generator

You have to add some extra property of JsBarcode Library for customization of the oracle apex barcode generator. Add Below JavaScript Code.

Code:-

v=apex.item( "P27_INPUT" ).getValue();//pass your item name

JsBarcode("#canvas", v,{

  lineColor: "#0aa",

  width: 3,

  height: 150,

  displayValue: false

}); 

You can change width, height, or line code value according to your requirement.

Click Here For Demo

That's all, here I have generated a simple barcode using JsBarcode Library. There are more options available in JSBarcode Library to customize the barcode. I am sharing JsBarcode library URL where you can learn more about barcode customization.

Click Here For JsBarcode

If you have to generate a QR code in oracle apex then I have already posted an article on QR code. Click here for reading.

Download Barcode in Local System
In this section, I will add some javascript code which will help you download the barcode as an image in your local system.

First, you have to add below URL in your javascript file URL section

https://html2canvas.hertzen.com/dist/html2canvas.js

Add the given javascript function in your function and global declaration section which will help you to download the barcode as an image in your local system.

function download_barcode(){
//pass your canvas id
html2canvas(document.querySelector("#canvas")).then(function(canvas) { 
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'image.jpg';
a.click();
});

}

Now call the above javascript function in your existing dynamic action. See the below screenshot for a better understanding.

If you like the barcode generator in oracle apex then, please share your view in the comment box and you can also share this post with your friends.

Reference:-https://lindell.me/JsBarcode
https://html2canvas.hertzen.com/dist/html2canvas.js