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.
https://html2canvas.hertzen.com/dist/html2canvas.js
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();
});
}

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
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
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
6 Comments
please open the demo source because the above steps are not working
ReplyDeleteYou can watch the video for barcode generator implementation.
Deletethe below link:-
https://youtu.be/mSeIbRTUevU
Thank you
Deletenot working
ReplyDeleteI 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.
DeleteYou have to go to my youtube channel where I have uploaded a video on the same.
DeleteIf you have any doubts, Please let me know