Overview
This document talks about generating bar code in Oracle Apex using input value and bar code type. this has been achieved using JavaScript.
Technologies and Tools Used
The following technologies have been used to achieve the expected output.
- JavaScript
- Oracle Apex
Use Case
Assume that we are having the requirement to generate the bar code based on input value and bar code type in oracle apex.
This document explains how to achieve this requirement.
Architecture
The following steps explain in detail,
Step 1:
We need to upload the “JsBarcode.all.min.js” JavaScript file in the static workspace file or static application file.
You can download the JavaScript using the below link,
Step 2:
Select the static workspace files or static application files in shared components. Then, click the create file option and upload the downloaded JavaScript.
From the Static workspace, In the “files report” copy the texts from the reference column.
Step 3:
Paste the copied text in the JavaScript file URLs section.
Step 4:
Create the dynamic action after the refresh event to Initialize the value in the bar code generator JavaScript code.
Select the true action on execute JavaScript Code and enter the below JavaScript Code.
JsBarcode(“.barcode”).init();
Step 5:
Paste the below code in the JavaScript function and global variable declaration.
function download_barcode(){
//pass your canvas id
html2canvas(document.querySelector(“#barcode”)).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();
});
}
Step 6:
Create static content region as bar code creator.
In the source, Paste the below code in the Source HTML code region.
<canvas id=”barcode”></canvas>
Step 7:
Create the below items,
P3_INPUT as the text field type.
P3_TYPE as select list type. Below is a list of values.
Add create button and Download button.
On-Page, load creates dynamic action to hide the download button.
In create button, dynamic action on execute JavaScript and show download button.
Add the below code in executing JavaScript.
v=apex.item( “P3_INPUT” ).getValue();
x=apex.item( “P3_TYPE” ).getValue();
JsBarcode(“#barcode”, v, {
format: x,
lineColor: “#0aa”,
width: 4,
height: 40,
displayValue: v
});
On the download button, create dynamic action to execute JavaScript.
download_barcode();
Conclusion
Output:
Using the above steps we can generate bar codes for a given input and for the selected type. Also, We can download the generated bar code.
