Barcode scanner button provideFallback property is not working

[#1]

Hello,

I’m using the sap.ndc.BarcodeScannerButton for the barcode scanning. It is working fine on the fiori client.

But I want to hide the button if scanning is not possible (like on a desktop browser). I set therefore the property provideFallback to false, but the button is still visible. When I click on the button then the fallback popup appears and says that the scanner is not available. How can I hide the button if scanning is not possible?

<ndc:BarcodeScannerButton scanSuccess="onScanSuccess" provideFallback="false" />

I tested also the sap.ndc.BarcodeScanner.getStatusModel method. It returns always available = true.

I have additional an issue with the cancelation of the scanning. If the user cancels the scanning then also the fallback popup appears where the user can enter the value manual. Is it possible to skip this popup?

[imsuryapandiyan · Accepted solution]

Hi Frank,

Hope this helps.

In init:

var mData = { cordovaEnabled: false };

if (typeof cordova !== 'undefined') {
mData.cordovaEnabled = true;
}
var oModel = new JSONModel(mData); 

oModel.setDefaultBindingMode("OneWay");

this.setModel(oModel, "cordova");

In view:

visible="{cordova>/cordovaEnabled}"

Good Luck!

[frankmueller9 · Accepted solution]

Hi Suriya,

thank you very much for your reply.

The cordova flag is working, but I'm facing issues with the onInit event. Sometimes the flag is not set. It looks like that the cordova libary is not yet loaded. So I added a setTimeout (1000ms) and then it is working fine. Is there a better way to wait until the cordova libary is loaded if it is available?

Best regards

Frank

[imsuryapandiyan · Accepted solution]

Ideally cordova should be defined before application is loaded as it loads in Fiori Client container.

Did you try with onAfterRendering or attachPatternMatched method?

[frankmueller9 · Accepted solution]

Yes, I tried both, but it is not working.

[maximt]

Hello. The second part of the question is not answered here.

I have additional an issue with the cancelation of the scanning. If the user cancels the scanning then also the fallback popup appears where the user can enter the value manual. Is it possible to skip this popup?

I faced the same issue. I don't need at all the follow-up popup when I cancel QR scanning.. I found the solution. Maybe who finds this post again my answer will be helpful.

There are no properties in the standard control library that could customize this behavior, which is definitely not convenient and looks like not developed completely.. After I read the standard code of the library, I found out this popup is just hardcoded. 2022-03-22-16-47-01.png

So the only way to solve it - rewrite this part with a custom js file. How to do that is written for example in this blog

For me it works fine, I just rewrite the press function this way:

		function getScanDialog(fnSuccess, fnFail, fnLiveUpdate, sTitle) {
			var oDialogModel;
			oScanDialogController.onSuccess = fnSuccess;
			oScanDialogController.onFail = fnFail;
			oScanDialogController.onLiveUpdate = fnLiveUpdate;


			if (!oScanDialog || (oScanDialog && oScanDialog.getContent().length === 0)) {
				oDialogModel = new JSONModel();
				oScanDialog = new Dialog('sapNdcBarcodeScannerDialog', {
					icon: 'sap-icon://bar-code',
					title: "",
					stretch: true,
					horizontalScrolling: false,
					verticalScrolling: false,
					endButton: new Button({
						text: "{i18n>BARCODE_DIALOG_CANCEL}",
						enabled: false,
						press: function () {
							BarcodeScanner.closeScanDialog();
						}
					}),
					afterClose: function () {
						closeZXingScanContain();
						oScanDialog.destroyContent();
						oScanDialog.destroy();
						oScanDialog = null;
					}
				});

[adtoth_s]

Hi Maxim,

We are facing the exact same problem. I've extended the BarcodeScannerButton, but the getScanDialog is not getting triggered.

I was able to trigger the Scan via customBarcodeScanner.prototype.scan.

Could you please advise?

Kind Regards,

David

[maximt]

Hi David,

There was a bit trickier.. In standard they wrote method 'getScanDialog' not right inside the BarcodeScannerButton class but in the their internal library. So I needed to implement two JS controls. I describe in steps to be more clear.
1) I created new folder 'extcontrol' in the webapp folder.
2) There I created two js files custombarcode.js and custombarcodescanner.js.
custombarcode.js is for rewriting BarcodeScannerButton class for _onBtnPressed method. Specifically this method comes first in debugger and we need to redefine it to call not the standard library BarcodeScannerUIContainer, but our custom one (in my case it is custombarcodescanner.js ). And only in custombarcodescanner.js rewrite the function getScanDialog.

3) Then on the View we need to define our folder as a library on the very above

"xmlns:ext="<id>.extcontrol"

4) Use the extended custom control on the needed place on the View

<ext:custombarcode id="sampleBarcodeScannerButton" scanSuccess="onScanSuccess" scanFail="onScanError" provideFallback="false"
tooltip="{i18n>scanQRtooltip}"/>

[adtoth_s]

Hi Maxim,

Thanks for your quick answer.

I was trying to redefine the BarcodeScanner because the getScanDialog is implemented there. But it's not possible to extend that control.

The BarcodeScannerUIContainer has only a renderer function.

[maximt]

Hi David
getScanDialog function is not actually in BarcodeScanner class, it's inside the library.
About 'BarcodeScannerUIContainer' maybe I messed up the correct name of the library they use.
Try to do how I described above, I attache the code of custombarcodescannerjs.txtmy 'custombarcodescanner.js' - it is the needed library with the changed getScanDialog.

custombarcodescannerjs.txt

[adtoth_s]

Hi Maxim,

Yes, this is. also what I've ended up with. Basically the full code of the BarcodeScanner is inluded in my custom file, and there I've changed the getScanDialog function. Works as expected.

Thanks a lot for your help.

David

[Former Member]

You can create a JSON model with device information like this

var oModel = new JSONModel(Device); 

oModel.setDefaultBindingMode("OneWay");

this.setModel(oModel, "device");

and than in your XML you can hide the button if

{device>/system/desktop}

[frankmueller9]

Hi Emanuele,

thank you very much for your replay.

I know that I can check the device type. But I also must distinguish between the fiori client and the browser on the phone / tablet. I hopped that this API will check this.

Is there another way to check if the fiori client (cordova) or the kapsel plugin is running?

Best regards

Frank

[Former Member]

Maybe I don't get it. Do you want to hide that button if you're on a desktop device right? So why would it matter if you're on your Fiori app or on a kapsel/hybrid app? You just want to hide it if you're not on a mobile device.

[frankmueller9]

The button uses the cordova barcode scanner. This one is only available in the fiori client app. It is not available in the browser. So if the user calls the app in a browser on the phone then the scanner is not working. That's why I'd like to hide this button there as well.

[Former Member]

Got it. So I think that the only thing you can do is to have two different apps, one deployed with cordova lib that shows the button and another one that is not embedding cordova and so does not have the button.

I don't think you can handle it in another way.

Are you using WebIDE to deploy this application?

[frankmueller9]

We are using WebIDE to deploy the app. But our app is very complex. It has 48 views. The effort to maintain 2 apps is not in the relation to hide a button. If I don't find another solution then I will hide the button based on the the device type. So if a user calls the app on the phone browser then he will see the fallback popup.

[Former Member]

I've never tested it because right now I've no time to setup this kind of example but what you could do is this.

On the startup of your app, print in a dialog the JSON of the Device object (what I've showed to you in the comment) and compare that info between the version embedded in the app and the one opened by the browser on the phone.

Than you should check if you have some value to play with to show/hide the button.