on 2019 Feb 21 6:01 AM
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
Request clarification before answering.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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?");
}
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Mustafa;
Did you solve this issue? I am also writing a similar application but couldn’t find how to hide the keyboard.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
52 | |
8 | |
5 | |
5 | |
5 | |
5 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.