OutSystems - How to use Scandit Barcode Scanner SDK 5.x plugin for Cordova with OutSystems platform

 Note: This guide is in particular for version 5.x of the Scandit Barcode Scanner SDK plugin for Cordova

Step 1

Create a plugin module by cloning the Template plugin downloaded from Forge as described in the Clone Template plugin section of this article: https://www.outsystems.com/blog/posts/how-to-create-a-cordova-plugin-from-scratch/.

Step 2

Rename the module to some meaningful name, e.g. ScanditPlugin.

Step 3

Download Cordova 5.x SDK package from your Scandit dashboard at https://ssl.scandit.com/sdk. Rename the folder containing our plugin to ScanditBarcodeScanner and zip it so that the zip file is called ScanditBarcodeScanner.zip.

Step 4

In the opened plugin module go to Data tab and right click on the Resources folder to import the prepared zip file. 

Step 5

Go to module’s Extensibility Configurations and use the following code:

{

    “resource”: “ScanditBarcodeScanner.zip”,

    “plugin”: {

        “resource”: “ScanditBarcodeScanner”

    }

}

Step 6

Switch to the Logic tab and rename the CheckTemplate_Plugin to CheckScanditPlugin, then open it. This action lets the user (your OutSystems mobile app, in this case) verify the plugin’s availability before invoking any of its methods. In this block, double-click the PluginIsLoaded script to begin editing. This script must assign true or false to IsAvailable before it returns. Replace the block with the following line:

    $parameters.IsAvailable = !!Scandit

This checks for Scandit namespace availability.

Step 7

Add next Client Action and call it SetScanditAppKey. Add two Output parameters to it: Success (Data Type: boolean) and Error (Data Type: Error). Open the SetScanditAppKey action and use the logic structure as on the below picture. 

Use the following line inside the JS code block: 

Scandit.License.setAppKey(‘YOUR_LICENSE_KEY_IS_NEEDED_HERE’);

This Action checks Scandit namespace availability and sets the license key in case it is available.

Step 8

Go to Interface tab and create a flow according to your needs. You can use the following structure. All input parameters can have Data Type set as Text. 

Open the OnReady Client Action and use the following structure. 

Open the JS code block and define your scan settings. See some example settings below:

var settings = new Scandit.ScanSettings();
settings.setSymbologyEnabled(Scandit.Barcode.Symbology.EAN13, true);
settings.setSymbologyEnabled(Scandit.Barcode.Symbology.EAN8, true);
settings.setSymbologyEnabled(Scandit.Barcode.Symbology.UPCA, true);
settings.setSymbologyEnabled(Scandit.Barcode.Symbology.UPCE, true);

settings.matrixScanEnabled = true;
settings.maxNumberOfCodesPerFrame = 10;

$parameters.scanditObj = new Scandit.BarcodePicker(settings);

Open the Error block and use the following line:

SetScanditAppKey.Error.ErrorCode+ “: “ + SetScanditAppKey.Error.ErrorMessage

Open the ScanOnClick Client Action and use the following structure:

Open the JS code block and use the following code:

function success(session) {
        $actions.OnScan(session.newlyRecognizedCodes[0].symbology, session.newlyRecognizedCodes[0].data);
        $resolve();
}
function manual(content) {
        $actions.OnManual(content);
        $resolve();
}
function failure(error) {
        $actions.OnError(error);
        alert('fails');
        $resolve();
}

var detectedCodes = [];

function didRecognizeNewCodes(matrixScanSession) {
        var numExpectedCodes = 5;
        detectedCodes.push(matrixScanSession.newlyTrackedCodes);
        console.log(detectedCodes);

        if (detectedCodes.length >= numExpectedCodes) {
              $parameters.scanditObj.cancel();
        }
        $resolve();
}

$parameters.scanditObj.continuousMode = true;
$parameters.scanditObj.getOverlayView().setGuiStyle(Scandit.ScanOverlay.GuiStyle.MATRIXSCAN);
$parameters.scanditObj.getOverlayView().setBeepEnabled(true);
$parameters.scanditObj.getOverlayView().setVibrateEnabled(true);

$parameters.scanditObj.show({
        didRecognizeNewCodes: didRecognizeNewCodes,
});
$parameters.scanditObj.startScanning();

    You can now publish the ScanditPlugin module. 

Step 9

Create a new empty phone App using New Application button. Rename it with some meaningful name, e.g. ScanditPluginTest. Create a new module with the same name and module type set as Phone App. 

Step 10

Open the newly created app and Manage Dependencies window (Ctrl + Q) once the app project opens. Find the Scandit plugin you created previously and add it (along with all the Client Actions) to your new app by clicking Apply as you can see on the below picture.

Now you should be able to see both plugin actions under the Logic tab of your app as you can see below.

Step 11

Go to Interface tab and create a new Screen. Add the Scan button to it. You can also add another button to test if plugin is properly added as you can see on the below picture. 

Step 12

Create the following Local Variables and Client Actions under newly created Screen:

Step 13

Open ButtonOnClick Client Action and create the following structure.

You can use the following code in the Error block:

    “Plugin is not available” + If(CheckScanditPlugin.Error.ErrorMessage<> “”,” “+
    CheckScanditPlugin.Error.ErrorMessage, “”)

Step 14

Open Scandit_ScanError Client Action and create the following structure. 

You can use the following line in the Value block:

    “Error: “ +ErrorMessage

Step 15

Create the same structure for the Scandit_ScanManual Client Action and use the following line in the Value block:

    “Manual: “ +Data

Step 16

Create the same structure for the Scandit_ScanScan Client Action and use the following line in the Value block:

    “Scanned “ + Symbology + “ code: “ + Data

Step 17

Set ButtonOnClick as On Click parameter of the button for checking plugin’s availability as you can see below.

Step 18

Set the following actions for different events of the Scan button as you can see below:

Step 19

Now you can publish your app. Then go to your Service Center, select Factory tab, then Application and find the one you have just published. Click on the Native Platforms tab and generate an apk or ipa file according to your needs. 

Step 20

Run the generated file on your mobile device. 

Note: It will only work when run on an actual device.

OutSystems is a registered trademark of OutSystems- Software em Rede, S.A.