Fiori Mobile Disable Keyboard Input

[mustafaonderr]

hi experts,

i have deployed my ui5 project in fiori launchpad(fiori client) with mobile barcode scanner (Zebra TC20) . We are using input to capture the barcode value in the application. When we focus on input field by default soft keyboard of mobile device opens. please give me some suggestion how to disable the soft keyboard in mobile device

[mustafaonderr · Accepted solution]

Hi, enes.gulce

First of all, thanks for the answer, problem solved ��

I am sharing enes.gulce solution jsfiddle link for users who have the same problem

https://jsfiddle.net/mustafaonder/wh1u89rp/6/

[siddharth_shaligram5 · Accepted solution]

Hello Mustafa,

i am facing the same issue. could you please explain how you used that code??

especially since i cannot add div in a XML view and like did you add the object via javascript controller??

regards

Siddharth Shaligram

[former_member734881]

I had initially used Enes Gulce's answer to this question that did the trick, but then I had a requirement where the user needed to be able to toggle the on-screen keyboard on and off for the field on a device, in case scanning is not possible.

My investigation led me to the UI5 documentation, including an example on extending the UI5 Input control [1], from which I managed to construct the following:

sap.ui.define(
    ['sap/m/Input'],
    function (Input) {
        return Input.extend("co.example.control.Input", {
            metadata: {
                properties: {
                  'inputmode': {type: 'string', defaultValue: 'none'}
                }
            },
            renderer: {
                writeInnerAttributes: function (oRm, oInput) {
                    sap.m.InputRenderer.writeInnerAttributes.apply(this, arguments);
                    oRm.attr('inputmode', oInput.getInputmode())
                }
            }
        })
    }
)

This is less flexible than Enes' solution, but a lot simpler for this scenario. It also allows dynamically setting the value for the 'inputmode' attribute.

You could still take the approach here to make the solution more dynamic by using custom data attributes as Enes did, but overriding the renderer as shown here. (The use of the renderer rather than the onAfterRendering event is key here).

The advantage to doing it this way was that I was able to use binding to a data model to influence the value of the 'inputmode' attribute, thereby allowing dynamic switching via a button on the UI.

Example usage:

<ei:ExtendedInput inputmode="none"
                  change="onBarcodeScan"
                  value="{/ScannedBarcode}"/>

(In my case, I just used a model binding for the 'inputmode' property, rather than a fixed value as in the example above).

1. https://sapui5.hana.ondemand.com/sdk/#/topic/bcee26a4801748f39bf5698d83d903aa

[enes_gulce]

Hi mustafaonderr and simsekemre

As an alternative solution you can use html attribute inpumode="none". To do this, you need to extend input controller. Here is an example from @dennis.seah about how to extend input.

I also share my code;

Extended sap.m.input

sap.ui.define(
	['sap/m/Input'],
	function (Input) {
		var CustomInput = Input.extend("com.custom.app.controller.ext.Input", {
			metadata: {
				aggregations: {
					attributes: 'sap.ui.core.CustomData'
				}
			},
			renderer: {},
			onAfterRendering: function () {
				if (sap.m.Input.prototype.onAfterRendering) {
					sap.m.Input.prototype.onAfterRendering.apply(this, arguments);
				}
				var input = this.$().find('INPUT');
				this.getAttributes().forEach(function (attr) {
					input.attr(attr.getKey(), attr.getValue());
				});
			}
		});


		return CustomInput;
	}


);

And how to use custom controller in xml view

<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
	xmlns:acm="com.custom.app.controller.ext" xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
	<Page showHeader="false" enableScrolling="false" class="sapUiContentPadding" showNavButton="false">
		<HBox id="headerBox">
			<VBox width="80%">
				<Label text="{i18n>Barcode}:" id="barkodLbl"/>
				<acm:Input id="barcode" submit="onBarcodeChange">
					<acm:attributes>
						<core:CustomData key="inputmode" value="none" writeToDom="true"/>
					</acm:attributes>
				</acm:Input>
			</VBox>
...

Regards.

Enes.

[former_member738552]

Hi Enes,

I am technically following the same approach by setting the input mode to none but there is no change with the soft keyboard behavior in Zebra devices.

Below is my replicated approach

Extending the Input:

sap.ui.define(
	['sap/m/Input'],
	function (Input) {
		var CustomInput = Input.extend("com.sample.model.Input", {
			metadata: {
				aggregations: {
					customData: 'sap.ui.core.CustomData'
				}
			},
			renderer: {},
			onAfterRendering: function () {
				if (sap.m.Input.prototype.onAfterRendering) {
					sap.m.Input.prototype.onAfterRendering.apply(this, arguments);
				}
				var input = this.$().find('INPUT');
				this.getAttributes().forEach(function (attr) {
					input.attr(attr.getKey(), attr.getValue());
				});
			}
		});
		return CustomInput;
	}
);

XML View

xmlns:acm="com.sample.model" xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
<acm:Input id="inputId" value=""  submit="onSubmitTagId">
		<acm:layoutData>
			<l:GridData span="XL2 L5 M5 S12"/>
		</acm:layoutData>
		<acm:attributes>
			<core:CustomData key="inputmode" value="none" writeToDom="true"/>
		</acm:attributes>
</acm:Input>

Also focusing the input as below in its corresponding controller.

onAfterRendering: function () {
    var inputFocus = this.byId("inputId");
	setTimeout(function () {
		inputFocus.focus();
	}, 1500);
},

Please let me know your thoughts

Regards,

Abhinay

[enes_gulce]

Hi abhi0806,

Your code seems ok. It may be compatibility issue. Have you checked inputmode browser compatibility. Most probably your device runs Android, if so and if you are not using browser you have to check Android webview verison. Or if you use custom native app to access Fiori which uses an alternative way to android webview like crosswalk you have to check its compatibility.

Regards.

Enes.

[former_member738552]

Thanks for the information Enes.

Regards,

Abhinay

[former_member596346]

Use enabled or disabled properties of Input field.

[mustafaonderr]

Hi krushmit

Can you give more detail. I did not understand.

Thanks for comment.

[former_member596346]

Refer above code.

[mustafaonderr]

Hi krushmit

thanks for comment but I need editable field because barcode scanner read barcoded and fill my input.

My problem is when user focus or click barcode input soft keyboard open i want to close automaticly or disable, soft keyboard.

[mustafaonderr]

Hi simsekemre;

I couldn't solve the problem, but I continued temporarily in another wayYou must use fiori mobile application, web not supported.Add a button your view and handle this code onpress event.

onCamera: function(oEvent) {

    var that = this;
    cordova.plugins.barcodeScanner.scan(scanSuccessCallback, scanErrorCallback);

    function scanSuccessCallback(result) {
        // that.showToster("We got a barcode " + result.text);
        // that.getView().byId("searchField").setValue(result.text);
        that.onSubmitEan(oEvent, result.text)();

        that.onCamera(oEvent, oData);
    }

    function scanErrorCallback(error) {
        sap.m.MessageToast.show("Kamera Hatas?");
    }


}

[former_member608802]

Hi Mustafa;

Did you solve this issue? I am also writing a similar application but couldn’t find how to hide the keyboard.

[former_member227918]

are you scanning barcode on press of input ?

i would suggest use enabled/editable property false and place a small button after input to scan barcode and even input non editable you will be able to fill value into it.

[mustafaonderr]

Hi akhilesh.upadhyay

The barcode machine has its own button. Press the button to paste the barcode value at the cursor position

[former_member227918]

BTW what if you set editable property as false to this input, isn't solved your issue?