Question Re: Barcode scanner button provideFallback property is not working in Technology Q&A

Barcode scanner button provideFallback property is not working

frankmueller9 — Fri, 14 Sep 2018 14:22:39 GMT

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?

Re: Barcode scanner button provideFallback property is not working

Former Member — Sat, 15 Sep 2018 07:45:57 GMT

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}

Re: Barcode scanner button provideFallback property is not working

frankmueller9 — Mon, 17 Sep 2018 06:10:34 GMT

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

Re: Barcode scanner button provideFallback property is not working

Former Member — Mon, 17 Sep 2018 20:07:44 GMT

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.

Re: Barcode scanner button provideFallback property is not working

frankmueller9 — Tue, 18 Sep 2018 04:58:26 GMT

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.

Re: Barcode scanner button provideFallback property is not working

Former Member — Tue, 18 Sep 2018 05:50:15 GMT

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?

Re: Barcode scanner button provideFallback property is not working

frankmueller9 — Wed, 19 Sep 2018 04:46:33 GMT

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.

Re: Barcode scanner button provideFallback property is not working

Former Member — Wed, 19 Sep 2018 06:12:36 GMT

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.

Re: Barcode scanner button provideFallback property is not working

imsuryapandiyan — Wed, 19 Sep 2018 08:10:49 GMT

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!

Re: Barcode scanner button provideFallback property is not working

frankmueller9 — Wed, 19 Sep 2018 11:44:53 GMT

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

Re: Barcode scanner button provideFallback property is not working

imsuryapandiyan — Wed, 19 Sep 2018 12:26:16 GMT

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

Did you try with onAfterRendering or attachPatternMatched method?

Re: Barcode scanner button provideFallback property is not working

frankmueller9 — Wed, 19 Sep 2018 13:32:04 GMT

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

Re: Barcode scanner button provideFallback property is not working

maximt — Tue, 22 Mar 2022 14:29:20 GMT

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;
					}
				});

Re: Barcode scanner button provideFallback property is not working

adtoth_s — Tue, 04 Oct 2022 13:41:32 GMT

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

Re: Barcode scanner button provideFallback property is not working

maximt — Tue, 04 Oct 2022 16:05:21 GMT

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}"/>

Re: Barcode scanner button provideFallback property is not working

adtoth_s — Wed, 05 Oct 2022 08:48:23 GMT

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.

Re: Barcode scanner button provideFallback property is not working

maximt — Wed, 05 Oct 2022 09:00:46 GMT

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.

Re: Barcode scanner button provideFallback property is not working

adtoth_s — Wed, 05 Oct 2022 10:48:58 GMT

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