Ticker

6/recent/ticker-posts

Barcode Generator in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial, We are going to see the how to add barcode generator in Oracle APEX.

Basically, I am using a third party library whose name is JSBarcodeJsBarcode is a barcode generator which is written in JavaScript.

You can easily generate different types of barcodes using JsBarcode. The Barcode generation library that works in both browser and Node.js. Barcode generation libraries support multiple barcode formats.

Barcode Generator in Oracle APEX

I am sharing following steps which will help to add barcode generator in Oracle APEX.

Step 1:-Use the following link in your page JavaScript File URL section either You can download the minified Js Barcode library and you can use it in your application. See the following screenshot.

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

Step 2:-Create a user input screen where users can enter any information. We have created a region, item field and one submit button on my page. See the following screenshot. 

Step 3:- Now we have to create a canvas region or image element for the display Barcode. We have used the canvas element for display barcode. You can also use image elements for display barcode. See the following screenshot.

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

Step 4:-Create a click dynamic action on the button. Go to the button and right-click on the mouse then choose the dynamic action option. Follow the below dynamic action instruction and see the following screenshot.

Identification: Display Barcode // Dynamic Action Name
Event: Click
Selection Type: Button
Button: Submit //Choose your page button name

After the creating dynamic action, add true action with the following instruction.

Action: Execute JavaScript Code
Code:   v=apex.item( "P27_INPUT" ).getValue(); //Pass your page item
             JsBarcode("#canvas", v);                             //Pass canvas id

More Customization in Barcode Generator in Oracle APEX then You have to add some extra property of JsBarcode Library for customization. Add the following 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

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

Generate QR code in Oracle APEX

How to 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.

Add Following 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.

That's all for today, I hope you like my (Barcode Generator in Oracle APEX) blog post. If you liked this post then comment in the comment box section.

You can also subscribe to our youtube channel where we also post videos of Oracle APEX.

Reference:-

Post a Comment

6 Comments

  1. please open the demo source because the above steps are not working

    ReplyDelete
    Replies
    1. You can watch the video for barcode generator implementation.
      the below link:-
      https://youtu.be/mSeIbRTUevU

      Delete
  2. Replies
    1. I think you have forgotten some steps or you have not added a javascript library. Please check again if it is not working then export your application and send it to my official email id. I will check and resend to you.

      Delete
    2. You have to go to my youtube channel where I have uploaded a video on the same.

      Delete

If you have any doubts, Please let me know