Search for a command to run...
No comments yet. Be the first to comment.
Oracle APEX already includes Font APEX as the default icon library for Universal Theme. In most cases, that is enough. But in one of my APEX apps, I needed a few icons that were not available there, s
Looking to give your Oracle APEX mobile app a modern, native feel? Here’s a quick hack: add a floating action button that stays anchored at the bottom corner just like in popular mobile apps. This sma
APEX 26.1 has been updated to the Universal Theme. While much of the attention in this release is on AI features, I think the UT improvements are just as important for developers like me who care abou
The apex_barcode package offers a PL/SQL API to generate various types of barcodes. You can output barcodes as SVG (Scalable Vector Graphics) values or as PNG file blobs, making it easy to embed them
Oracle APEX makes it easy to get data on screen fast, but often, the default tabular output isn’t enough. What if you want to highlight statuses, add icons, or display badges all without writing compl
The APEX QR Code page item is very useful, but I miss the option to download it as an image and let users change the QR Code size. Currently, only a developer can edit the item to change its size.
First, we need to create a QR CODE item. In my example, the item is called P2_QRCODE, with the static value of www.apexblog.dev. When we point the camera at it, it will open the browser and go to this blog.
To enable downloading the QR Code as an image, I will use a bit of JavaScript to capture a screenshot of the item and save it as a JPG. I am currently hardcoding the image filename, but we can also add a new parameter to the function to make it dynamic.
function downloadQrcode(item) {
var svgElement = apex.item(item).node.querySelector("svg"),
itemElement = apex.item(item);
if (!svgElement) {
console.error("Invalid QRCODE");
}
var svgString = new XMLSerializer().serializeToString(svgElement);
// set larger canvas dimensions
var canvas = document.createElement('canvas');
canvas.width = itemElement.offsetWidth;
canvas.height = itemElement.offsetHeight;
var ctx = canvas.getContext("2d");
// clear background
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svgBlob = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function() {
// calculate scaling to fit the entire QR code
var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
var x = (canvas.width - img.width * scale) / 2;
var y = (canvas.height - img.height * scale) / 2;
// draw the image centered and scaled
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
// Create an image element and download it
var jpg = canvas.toDataURL('image/jpeg', 1.0);
var link = document.createElement("a");
document.body.appendChild(link);
link.href = jpg;
link.download = 'qrcode.jpg';
link.click();
document.body.removeChild(link);
DOMURL.revokeObjectURL(url);
};
img.src = url;
}
We can now copy and paste this function into the page's Function and Global Variable Declaration section or add it to a JavaScript file, as long as it is accessible on the page.
The next step is to create a button and a dynamic action that triggers when we click the button. Add an action to this dynamic action of type Execute JavaScript Code and include the code below.
downloadQrcode("P2_QR_CODE");
When we click the button, the qrcode.jpg file is downloaded.
If we inspect the QR Code using the browser's developer tools, we will notice that each size has a different CSS class.
small: a-QRCode--sm
medium: a-QRCode--md
large: a-QRCode--lg
By changing the class, the size will also change. To manage this, let's do the following:
Create a Radio Group with the following static values
Create an on-change dynamic action to trigger when you click on the radio group item.
Add an Execute JavaScript Code action with the code below. This JavaScript code will get the chosen value from the Radio Group and change the QR CODE item's class accordingly.
var elementId = this.affectedElements[0].id
size = apex.item(this.triggeringElement.id).getValue();
if (size == 'S'){
apex.item(elementId).node.className = "a-QRCode a-QRCode--sm";
}else if (size == 'M'){
apex.item(elementId).node.className = "a-QRCode a-QRCode--md";
}else if (size == 'L'){
apex.item(elementId).node.className = "a-QRCode a-QRCode--lg";
}