QR CODE enchancements

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.

Download the QR Code

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.

Change QR Code Size

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:

1. Create a Radio Group with the following static values

   

2. Create an on-change dynamic action to trigger when you click on the radio group item.

3. 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";
    }