<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<title>Demo</title>
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-onInit="onUI5Init"
data-sap-ui-compatVersion="edge"
data-sap-ui-excludeJQueryCompat="true"
data-sap-ui-resourceRoots='{ "demo": "./" }'
data-sap-ui-xx-waitForTheme="init"
></script>
<script>
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], async (XMLView) => {
"use strict";
const control = await XMLView.create({
viewName: "demo.view.App",
height: "100%",
displayBlock: true,
}).then(view => view.placeAt("content"));
control.placeAt("content");
});
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
sap.ui.define([
"sap/m/Input", // or "sap/m/InputBase" depending on your use case
"sap/ui/core/IconPool",
"sap/m/InputRenderer", // "sap/m/InputBaseRenderer" in case of InputBase
], function(Input, IconPool, InputRenderer) {
"use strict";
/**
* MINIMAL EXAMPLE
* No custom Input required if UI5 version >= 1.84!
* For UI5 1.84 and above, simply assigning a value to `valueHelpIconSrc`.
*/
return Input.extend("demo.control.InputWithQuestionMark", {
renderer: InputRenderer,
metadata: {
events: {
endButtonPress: {}
}
},
init() {
Input.prototype.init.apply(this, arguments);
const icon = this.addEndIcon({
id: this.getId() + "-questionmark",
src: IconPool.getIconURI("sys-help"),
noTabStop: true,
decorative: false,
tooltip: "Information",
press: [ this.onEndButtonPress, this ],
});
// See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..
},
onBeforeRendering() {
Input.prototype.onBeforeRendering.apply(this, arguments);
const endIcons = this.getAggregation("_endIcon");
const isEditable = this.getEditable();
if (Array.isArray(endIcons)) {
endIcons.map(icon => icon.setProperty("visible", isEditable, true));
}
},
onEndButtonPress() {
if (this.getEnabled() && this.getEditable()) {
this.fireEndButtonPress({});
}
},
onsapshow(event) { // F4 pressed
if (!this.getEnabled() || !this.getEditable()) {
return;
}
this.fireEndButtonPress({});
event.preventDefault();
event.stopPropagation();
},
});
});
sap.ui.define([
"sap/m/MaskInput",
"sap/ui/core/IconPool",
"sap/m/MaskInputRenderer",
], (MaskInput, IconPool, MaskInputRenderer) => {
"use strict";
/**
* MINIMAL EXAMPLE
*/
return MaskInput.extend("demo.control.MaskInputWithQuestionMark", {
renderer: MaskInputRenderer,
metadata: {
events: {
endButtonPress: {}
}
},
init() {
MaskInput.prototype.init.apply(this, arguments);
const icon = this.addEndIcon({
id: this.getId() + "-barcode",
src: IconPool.getIconURI("sap-icon://bar-code"),
noTabStop: true,
decorative: false,
tooltip: "Open Barcode Scanner",
press: [this.onEndButtonPress, this],
});
},
onBeforeRendering() {
MaskInput.prototype.onBeforeRendering.apply(this, arguments);
const endIcons = this.getAggregation("_endIcon");
const isEditable = this.getEditable();
if (Array.isArray(endIcons)) {
endIcons.map(icon => icon.setProperty("visible", isEditable, true));
}
},
onEndButtonPress() {
if (this.getEnabled() && this.getEditable()) {
this.fireEndButtonPress({});
}
},
onsapshow(event) { // F4 pressed
if (!this.getEnabled() || !this.getEditable()) {
return;
}
this.fireEndButtonPress({});
event.preventDefault();
event.stopPropagation();
},
});
});
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:f="sap.f"
xmlns:form="sap.ui.layout.form"
xmlns:my="demo.control"
>
<App autoFocus="false">
<Page
title="Customized "Value Help" (F4) Button"
class="sapUiResponsiveContentPadding"
>
<form:SimpleForm
editable="true"
layout="ColumnLayout"
>
<Toolbar>
<Title text="Showing Information" />
<Link
text="(stackoverflow.com/a/55314734)"
href="https://stackoverflow.com/a/55314734/5846045"
/>
</Toolbar>
<Label text="Standard sap.m.Input without extension" />
<Input
showClearIcon="true"
placeholder="Icon changed via valueHelpIconSrc (since 1.84)"
showValueHelp="true"
valueHelpIconSrc="sap-icon://sys-help"
valueHelpRequest="alert('Help requested')"
/>
<Label text="Extended sap.m.Input with an additional end icon" />
<my:InputBaseWithQuestionMark id="inputExtended"
placeholder="Icon set via .addEndIcon"
showValueHelp="false"
endButtonPress="alert('Help requested')"
/>
<Label text="With valueState "Information" only" />
<Input id="input"
showClearIcon="true"
valueState="Information"
valueStateText="Totally useful information: banging your head against a wall burns 150 calories an hour. 👍"
/>
<Toolbar>
<Title text="In sap.m.MaskInput" />
<Link
text="(stackoverflow.com/a/65259716)"
href="https://stackoverflow.com/a/65259716/5846045"
/>
</Toolbar>
<Label text="Barcode with fixed length" />
<my:BarcodeMaskInput
mask="9-999-999-aABC"
width="12rem"
textAlign="Center"
endButtonPress="alert('Scanner triggered!')"
/> <!-- sap.m.MaskInput has the following default masks:
- '9' for numbers
- 'a' for alphabets -->
</form:SimpleForm>
</Page>
</App>
</mvc:View>