Ticker

6/recent/ticker-posts

Barcode Generator in Oracle APEX - Javainhand Tutorial

barcode generator in oracle apex

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.



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.


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.

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

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