QR codes contain a lot of information. For example, when buying an airplane ticket, a QR code is generated containing the person's contact information, travel date, destination, seat, among others. Reading this QR code would interest a company that rents special chairs for passengers at airports, since it would be of great help to streamline processes. This way the company could obtain the person's information and transfer it to a form in a more efficient and fast way.
Scanning a QR code nowadays is much more convenient, since the information can be accessed with the simple use of a mobile camera.
Today we will show you how to incorporate this simple and easy tool in Knack applications.
Just follow the guideline!
Step 1: Create an object in the Knack database to store the QR code information:
Step 2: Create a form to fill it with the information that is read from the QR code
Step 3: Insert the following code section of the APP (Javascript Tab):
const openQRCamera = function (node, callback) {
Knack.showSpinner();
var reader = new FileReader();
reader.onload = function() {
node.value = "";
qrcode.callback = function(res) {
if(res instanceof Error) {
alert("No QR code found. Please make sure the QR code is within the camera's frame and try again.");
callback(null);
} else {
callback(res)
}
};
qrcode.decode(reader.result);
};
reader.readAsDataURL(node.files[0]);
};
const insertQRScannerButton = function (elAfter, qrDataCallback) {
$('<label>')
.text('Scan QR Code')
.addClass('qrcode-text-btn')
.append(
$('<input>')
.attr({
'type': 'file',
'accept': 'image/*',
'capture':'environment',
'tabindex': '-1'
})
.change(function () {
openQRCamera(this, function (flightData) {
qrDataCallback(flightData);
});
})
)
.insertAfter(elAfter);
};
$(document).on('knack-view-render.view_373', function (event, view, data) {
LazyLoad.js(['https://s3.amazonaws.com/soluntech/gat/qr-scanner.js'], function () {
var form = $('form');
var setData = function (flightData) {
if (!flightData) {
return Knack.hideSpinner();
}
form.find('#field_408').val(flightData);
Knack.hideSpinner();
};
insertQRScannerButton(form.find('#kn-input-field_408'), setData);
});
});
Link to the library: https://s3.amazonaws.com/soluntech/gat/qr-scanner.js (file cloned from https://github.com/LazarSoft/jsqrcode and uploaded to soluntech s3)
In the render-view event load the library using Knack's LazyLoad.js function
The insertQRScannerButton function inserts a new input type file component which will execute the openQRCamera function that will allow you to open the cell phone camera to take the QR Code photo.
Step 4: After the photo is taken, the native JavaScript FileReader is used to read the image and then use the decode function (qrcode.decode) of the library to analyze the QR Code and return the result, which is passed to the callback function of the same (qrcode.callback).
Step 5: Finally, the information read in the QR Code is taken and entered into the textarea of the created formview. When the previous action is not carried out, it is because the QR code is not valid.
You can edit the qrcode.callback code so that instead of filling out a form you can directly insert the information into the database using the API.
We would like to point out that QR scanner is a low cost solution and it is not always the best option, since the available library frequently fails which affects the main purpose which is to speed up the QR scanning. If you need something more reliable, you should try KnackScanner which, unlike JavaScript, uses the artificial intelligence libraries of Google and Apple to detect QR and all other barcodes with 99.9% reliability.
Please leave us a comment below if you’re planning to use this in the future!
Share this information with all your friends and colleagues!
Let's Make IT Happen!