Odk-x use intent to scan barcode in html page

benamor · September 30, 2019, 7:22am

Hello everyone,

I have HTML page like Geotagger where I can Search in the list using input text,
But I want to make a button where I can use the zxing barcode.
so I can easily find what I want from the list.
how can I make Intent in the javascript?
can anybody help me?

Thanks

W_Brunette · September 30, 2019, 8:49pm

You can use the odkcommon.js injected interface to launch an intent using the odkCommon.doAction function.

Brief example:

    $('#barcode').on('click', function() {
        var dispatchStruct = JSON.stringify({actionTypeKey: actionBarcode,
            htmlPath:htmlFileNameValue, userAction:userActionValue});

        odkCommon.doAction(dispatchStruct, 'com.google.zxing.client.android.SCAN', null);
    });

benamor · October 7, 2019, 9:29am

hello @W_Brunette
I did use the odkcommon.js to launch an intent but I can not receive data back .

window.addEventListener(“load”, function () {
odkCommon.registerListener(
function () {
alert(“inside the listener”);
var action = odkCommon.viewFirstQueuedAction();
$(“#searchForText”).val(“inside the listener”);
if (action !== null) {
console.debug(action);
$(“#searchForText”).val(JSON.stringify(action));
var dispatchStruct = action.dispatchStruct;
if (dispatchStruct && dispatchStruct.userAction == “scan-kast-code”) {
var jsonValue = action.jsonValue;
$(“#searchForText”).val(“status = " + jsonValue.status);
if (jsonValue.status === 0) {
$(”#searchForText").val(jsonValue.result);
console.log(jsonValue);
}
}
// process action – be idempotent!
// if processing fails, the action will still
// be on the queue.
odkCommon.removeFirstQueuedAction();
}
});
$(“#barcode”).click(function () {
var dispatchStruct = { userAction: “scan-kast-code” };
var intentArgs = {
// extras: extrasBundle,
// uri: // set the data field of intent to this
// data: // unless data is supplied – that takes precedence
// type: // set the intent type to this value
// package: // set the intent package to this value
};
    return odkCommon.doAction(dispatchStruct,
        'com.google.zxing.client.android.SCAN',
        intentArgs);
});
})

the registerListener doesn’t work or i don’t know how to use it.

Can you check with me, please.

linl33 · October 8, 2019, 1:08am

There are a few issues with your listener:

action.dispatchStruct is a JSON string, you need to parse it to read its content.
action.jsonValue.status is expected to be -1
The result of the scan is stored in action.jsonValue.result.SCAN_RESULT

If the issue is that the listener isn’t being called at all, try calling your listener right after registering it.

Thien_Mai · August 11, 2020, 9:40am

Hi @W_Brunette @linl33,

I am getting the same issue. This code worked correctly with old ODK, but it does not work with ODK-X as the listener never get called:

 let saveBarcodeFromScan = () => {
      let value = odkCommon.viewFirstQueuedAction();
      console.log("saveBarcodeFromScan: " + value);
      if ( value !== null && value !== undefined ) {
          let action = JSON.parse(value);
          let dispatch = JSON.parse(action.dispatchStruct);
          if (dispatch.userAction === 'barcodeScan' && action.jsonValue.status === -1) {
            let barcode = action.jsonValue.result.SCAN_RESULT;
            callback(barcode);
            odkCommon.removeFirstQueuedAction();
          }
      }
    };
odkCommon.registerListener(saveBarcodeFromScan);
odkCommon.doAction(JSON.stringify({ userAction: 'barcodeScan' }), 'com.google.zxing.client.android.SCAN', null);

Calling the listener right after registration also does not help:

odkCommon.registerListener(saveBarcodeFromScan);
saveBarcodeFromScan(); // immediately call the listener
odkCommon.doAction(JSON.stringify({ userAction: ‘barcodeScan’ }), ‘com.google.zxing.client.android.SCAN’, null);

This is a blocker for me as barcode scanner is one of my production key feature.

Emil · August 11, 2020, 11:58am

Hello,
Are you just trying to get the value of the scan?
If so, I believe something like this can do it?

Create a function to handle the call back and give a name to your userAction (in this example we’ll call it “thatsScanny”) like e.g.

function javaChange() {
    var action = odkCommon.viewFirstQueuedAction();
    if ( action !== null ) {
        console.log("call back called");
        if (action.dispatchStruct.userAction == "thatsScanny") {
            odkCommon.removeFirstQueuedAction();
            if (action.jsonValue.result && action.jsonValue.result.SCAN_RESULT) {
                var scanRes = action.jsonValue.result.SCAN_RESULT;
                // call you function to handle the code.. e.g doSearch()
                doSearch(scanRes); 
            }
        }
    }
}

Hook it up in the pages initialization method,e.g.

function display() { // we will call this onLoad
    console.log("Setting up display");
    odkCommon.registerListener( javaChange );
    javaChange(); // invoke it once, just because...

   // Assuming you have a button with id = btnScan
    $("#btnScan").on("click", function() {
        var dispatchStruct = {userAction: 'thatsScanny'};
        var x = odkSurvey.scanBarcode(dispatchStruct);
        console.log(x);
    })

}

best regards,
/emil

Thien_Mai · August 11, 2020, 12:24pm

Thanks for your quick reply, @Emil. It seems that your suggestion is very similar to my code. I cannot see the difference and why my code does not work. The problem is the registered listener never get called after odkCommonIf.doAction() is finished.

Emil · August 11, 2020, 12:29pm

I think a main difference, is that I use the odkSurvey.scanBarcode() method instead of calling odkCommenIf.doAction()

odkSurvey.scanBarcode(dispatchStruct);

Also; I need to invoke it once on page load for some reason:

javaChange(); // invoke it once, just because...

Thien_Mai · August 11, 2020, 12:56pm

Hi Emil, could you point me to documentation of odkSurvey.scanBarcode() method.

Emil · August 11, 2020, 1:24pm

Hmmm… that’s indeed a very good question
I looked at the source:

github.com

odk-x/app-designer/blob/master/app/system/survey/js/odkSurvey.js

/**
 * This represents the odkSurvey actions that can be performed from, e.g., odkTables
 * webviews if, e.g., you want to capture a barcode, etc.
 *
 * It should provide all the functions available to the javascript at this
 * version of the code. This does not currently have a dual Java injection. 
 * All calls are mapped to odkCommon.doAction() interactions.
 */
    
(function() {
'use strict';
/* global odkCommon */
window.odkSurvey = {
    initialScreenPath: "initial/0",

    /**
     * Returns true if a variable is an array.
     */
    isArray : function(varToTest) {
        if (Object.prototype.toString.call(varToTest) === '[object Array]') {

This file has been truncated. show original

Thien_Mai · August 14, 2020, 9:53am

Hi @Emil,

It does not work for me as odkSurvey.js in turn also calls OdkCommon.doAction().
I tried debugging ODK Table app with Android Studio and found why the listener never gets called. I will list my findings in another topic.

Anyway, I could make it work with a workaround. Thanks for following up.

W_Brunette · August 15, 2020, 8:47pm

@Thien_Mai please let us know what you find so we can fix it.

Thien_Mai · August 17, 2020, 6:32am

@W_Brunette, please correct me if I am wrong. As my understanding, once doAction() is finished, the Android app will call this method in ODKWebView to signal its client to call the registered listener:
ODKWebView.class:

public void signalQueuedActionAvailable() {
        this.log.i("ODKWebView", "[" + this.hashCode() + "] signalQueuedActionAvailable()");
        this.loadJavascriptUrl("javascript:window.odkCommon.signalQueuedActionAvailable()", true);
        this.shouldReloadAfterLoad = true;
    }

Let’s take a look at implementation of loadJavascriptUrl():

private synchronized void loadJavascriptUrl(final String javascriptUrl, boolean suppressIfFrameworkIsNotLoaded) {
        if (!this.isInactive()) {
            if (this.isLoadPageFrameworkFinished || !suppressIfFrameworkIsNotLoaded) {
                this.log.i("ODKWebView", "[" + this.hashCode() + "] loadJavascriptUrl: IMMEDIATE: " + javascriptUrl);
                if (Thread.currentThread() != Looper.getMainLooper().getThread()) {
                    this.post(new Runnable() {
                        public void run() {
                            ODKWebView.this.loadUrl(javascriptUrl);
                        }
                    });
                } else {
                    this.loadUrl(javascriptUrl);
                }
            }
        }
    }

this.isLoadPageFrameworkFinished is controlling whether the WebView should sends signal to client.

The problem I have found is: Once the barcode scanner app is launched, the current view is paused which then set this.isLoadPageFrameworkFinished to false. However, it is never set back to true then (e.g after the barcode scanner app exits and the view is resumed)

public void onPause() {
        ...
        this.isLoadPageFrameworkFinished = false;
    }

That’s what I have observed through app debugging. Any thoughts?

Emil · August 17, 2020, 7:30am

That looks like a good finding! Perhaps that could also explain why I need to call javaChange(); once before scanning works?

Thien_Mai · August 17, 2020, 7:59am

@Emil It does not work for me and I do not really understand why it works for you. As my understanding, when ODK Table cannot send signal for its client to fetch the result of doAction() (your javaChange() call), the result will then be retained in guardedQueuedActions list in ODK Table. Your next call of javaChange() will actually fetch that result and remove the result from the ODK. That means, nth call of listener will fetch result of (n-1)th doAction()?

W_Brunette · August 24, 2020, 10:18pm

@Thien_Mai here is some code I pulled from one of our projects that calls the barcode scanner and returns the barcode inside Tables.

Hopefully this will help. Let us know if you have direct questions about the code snippet. I think I copied enough.

/* action added to button */
 $('#barcode').on('click', doActionZxing);

/* code */
var actionBarcode = 0;
var htmlFileNameValue = "delivery_start";
var userActionValue = "launchBarcode";

util.actionTypeKey = 'actionTypeKey'

function doActionZxing() {
    var dispatchStruct = JSON.stringify({
        [util.actionTypeKey]: actionBarcode,
        htmlPath: htmlFileNameValue,
        userAction: userActionValue
    });

    odkCommon.doAction(dispatchStruct, 'com.google.zxing.client.android.SCAN', null);
}


function callBackFn () {
    var action = odkCommon.viewFirstQueuedAction();
    console.log('callback entered with action: ' + action);

    if (action === null || action === undefined) {
        // The queue is empty
        return;
    }

    var dispatchStr = JSON.parse(action.dispatchStruct);
    if (dispatchStr === null || dispatchStr === undefined) {
        console.log('Error: missing dispatch struct');
        odkCommon.removeFirstQueuedAction();
        return;
    }

    var actionType = dispatchStr[util.actionTypeKey];
    console.log('callBackFn: actionType: ' + actionType);

    if (actionType === actionBarcode) {
        handleBarcodeCallback(action, dispatchStr);
    } else {
        handleCallback(action, dispatchStr);
    }

    odkCommon.removeFirstQueuedAction();
}

shey_kerkup · October 31, 2021, 1:01pm

Hi, this might be coming a bit late but I noticed you registered the listener and called it immediately even before calling the odkCommon.doAction. The goal is to register the listener on page load and call it immediately after registering it because when the button to scan is clicked, control leaves the app and it is later returned to the activity that launched the intent - reason why it is good to register the listener and call it at once on page load.

I ran into this post because I faced similar issues.