QR Codes

From pmusers
Jump to: navigation, search

Accessing QR Codes with JavaScript

The standard ProcessMaker helper functions getValue(), setValue() and setOnchange() do not work with QR Codes.

QR Code storage

When a QR Code is scanned, its value will be added to the following array:

getFieldById("QR_Code_ID").model.attributes.codes

Where "QR_Code_ID" is the ID of the QR Code field.

This array can also be accessed using the getInfo() function:

$("#QR_Code_ID").getInfo().codes

Use the array's .length property to get the number of scanned QR Codes:

var numberCodes = $("#QR_Code_ID").getInfo().codes.length;

The name of the first and second QR Codes are obtained with the following JavaScript code:

if ($("#QR_Code_ID").getInfo.codes.length >= 2) {
  var firstCode  = $("#QR_Code_ID").getInfo().codes[0];
  var secondCode = $("#QR_Code_ID").getInfo().codes[1];
}

When a QR Code is scanned, its name is displayed in a <span>, which is inside a <div> whose class is "pmdynaform-label-options". For example, the following JavaScript code would get the name of the second scanned QR Code:

var secondCode = $("#QR_Code_ID").find("div.pmdynaform-label-options").find("span").eq(2);

Note: The first <span> is always empty and isn't used.

Adding a QR Code

It doesn't make much sense to add a QR code using JavaScript, since that should be done by the user, but the following JavaScript code can be used to add a QR code:

getFieldById("QR_Code_ID").model.attributes.codes.push("My QR Code Name");
$("#QR_Code_ID").find("div.pmdynaform-label-options").append("<span>My QR Code Name</span");

Clearing QR Codes

The following JavaScript clears all scanned QR codes:

getFieldById("QR_Code_ID").model.attributes.codes = [];
$("#QR_Code_ID").find("div.pmdynaform-label-options").html("<span></span>");

Note: there is an empty "<span></span>" by default.

To delete a particular scanned QR code, it's element needs to be removed from the .codes array and its <span> also needs to be removed. The following JavaScript code removes the second scanned QR code:

getFieldById("QR_Code_ID").model.attributes.codes.splice(1,1);
$("#QR_Code_ID").find("div.pmdynaform-label-options").find("span").eq(2).remove();

Executing code when a QR code is added

The .setOnchange() event handler doesn't work with QR Code fields. In order to execute code when a new QR code is scanned, it is recommended to create a custom function that checks whether the .codes array has changed. Then, use setInterval() to periodically execute the custom function.

For example, the following code displays an alert if each new QR code which is added doesn't contain the string "PMX" and it will delete the QR code that was just added:

//get number of QR codes when the form loads:
var codeCount = $("#QR_Code_ID").getInfo().codes.length;
 
function checkAddedQrCode() {
  if ($("#QR_Code_ID").getInfo().codes.length > codeCount) {
    //get name of added QR code:
    var addedQr = $("#QR_Code_ID").getInfo().codes[ codeCount ];
    
    //if added QR code doesn't contain "PMX", then delete it:
    if (addedQR.search("PMX") == -1) {
       alert("The QR Code '"+addedQr+"'\nwill be deleted because it doesn't contain 'PMX'.");
       getFieldById("QR_Code_ID").model.attributes.codes.splice(codeCount, 1);
       $("#QR_Code_ID").find("div.pmdynaform-label-options").find("span").eq(codeCount+1).remove();
    }
    else {
       //update counter:
       codeCount = $("#QR_Code_ID").getInfo().codes.length;
    }
}

setInterval(checkAddedQrCode, 1000); //execute once per second


JavaScript Example

This example shows how to display additional fields when the first QR code is scanned.


Dynaform: Product QR Code.json (right click and select Save Link As)
Author: Amos Batto (amos[at]processmaker[dot]com)
Version: 1.0 (2019-03-11)
Tested in: PM 3.3.4 Enterprise in Debian 9.5 with Firefox 60.5


The following Dynaform contains a QR Code field whose ID is "productQr":

ProductQrCodeFormInDesigner.png

JavaScript hides the "Product Name" and "Product Description" fields when the Dynaform loads. When the user scans the first QR code, then the "Product Name" and "Product Description" fields will be displayed. In addition, the value of the scanned QR code will be added to the "Product Name" field.

When the user clicks on the "Delete QR Codes" button, all the scanned QR codes will be deleted and the "Product Name" and "Product Description" fields will be hidden again, until the user scans another QR code.

Add the following JavaScript to the Dynaform to implement this functionality:

//If a QR code has been added to the form, then show the Product Name and Description fields
function showDetails() {
  if ($("#productQr").getInfo().codes.length) {
    var qrFile = $("#productQr").getInfo().codes[0];
    $("#productName").setValue(qrFile); 
    
    $("#productName").show();
    $("#productDescription").show();
    
    //clearInterval(qrTimer); //if wishing to get remove polled function 
  }
}

//delete all scanned QR Codes when "Delete QR Codes" button is clicked:
$("#deleteQrCodes").find("button").click( function() {
  $("#productQr").find("div.pmdynaform-label-options").html("<span></span>");
  getFieldById("productQr").model.attributes.codes = [];

  $("#productName").setValue("");
  $("#productDescription").setValue("");

  $("#productName").hide();
  $("#productDescription").hide();
});

//set showDetails to periodically execute when the form loads:
var qrTimer = setInterval(showDetails, 1000);

//hide Product Name and Description fields if no QR codes when form loads:
if ($("#productQr").getInfo().codes.length == 0) {
  $("#productName").hide();
  $("#productDescription").hide();
}

When the Dynaform is first loaded, the QR Code field is empty and two other fields are hidden.

ProductQrCodeFormEmpty.png

After the user scans the first QR code, then the other fields are displayed:

ProductQrCodeFormFilled.png