Using Smart Field Value Help with normal Input Field
source link: https://blogs.sap.com/2023/08/22/using-smart-field-value-help-with-normal-input-field/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Using Smart Field Value Help with normal Input Field
Introduction
With OData and Smart Field, we can using the value help defined by Annotation without Extra JavaScript/XML Code. In some scenario, the page is just too complex to using Fiori Elements or Smart Field.
But the value help from Annotation is convenient and useful feature, so I tried to use value help from OData with Annotation in normal Input Field by creating a “virtual” Smart Field.
As the rendering strategy of SAPUI5 is to not add invisible controls to the View tree, so Instead of defining the HBox with property visible= “false”, we define a visible HBox and use CSS to set its visibility to “hidden”. So the “virtual” Smart Field added to this HBox will be invisible.
<Input id="test1" width="10rem" showValueHelp="true" valueHelpRequest="onValueRequest"/>
<HBox width="1px" height="1px" id="invisibleBox" class="invisible">
</HBox>
<Input/>
Controller
In the JavaScript, what we did is mainly three parts:
- Create a Smart Field and bind the OData Model(contains value help annotation) to it
- Fire the “valueHelpRequest” of Smart Field we have created
- Set the selected value from Value Help Dialog to the Input Field
onValueRequest: function() {
/*create the smartfield for using its value help*/
var oSmartFiled = new SmartField({
value:{
path: 'salesOrganization'
}
});
/* Set the selected value to Input Field*/
oSmartFiled.attachChange(() => {
var sValue = oSmartFiled.getValue();
this.getView().byId("test1").setValue(sValue);
oSmartFiled.destroy();
})
/* overwrite the prototype function of this smartfield for adding custom logic to
Promise chain,
Source Code copied from sap.ui.comp.smartfield.SmartField*/
oSmartFiled._createICRenderedDeferred = function () {
var oDef;
oDef = new Deferred();
this._oRenderedWithContext = oDef;
Promise.all([
new Promise(function (fnResolve) {
this.attachInnerControlsCreated(fnResolve);
}.bind(this)),
new Promise(function (fnResolve) {
var oDelegate = {
onAfterRendering: function (oEvent) {
var oFocusCatcher = this._getFocusCatcher(),
oEditControl = this._oControl.edit,
oContent = this.getAggregation("_content");
if (
oEditControl &&
oEditControl.getDomRef() &&
oEditControl.getFocusDomRef() &&
oEditControl === oContent &&
(
!oFocusCatcher ||
!oFocusCatcher.getDomRef()
)
) {
this.removeEventDelegate(oDelegate);
fnResolve();
}
}.bind(this)
};
this.addEventDelegate(oDelegate);
}.bind(this))
]).then(function () {
oDef.resolve();
})
/*Add custom code to the Promise chain for ensure getting the rendered inner
InputField of Smartfield,
and then fire its "ValueHelpRequest" Event to show the Value Help Dialog
*/
.then(
() => {
try{
var sId = oSmartFiled.getId();
var oInput = sap.ui.getCore().byId(`${sId}-input`);
oInput.fireValueHelpRequest();
}catch(reason) {
}
}
);
};
/* Get the ODatamodel which be defined in manefest.json,
bind the ODatamodel to smartfield
add the smartfield to invisible FlexBox
*/
var oSalesModel = this.getOwnerComponent().getModel("salesOData");
var oNewItem = oSalesModel.createEntry("/Z_C_SOHEADER_L2");
oSmartFiled.setModel(oSalesModel);
oSmartFiled.setBindingContext(oNewItem);
var oFlexBox = this.getView().byId("invisibleBox");
oFlexBox.addItem(oSmartFiled);
}
And the result will be:
The value help dialog from Smart Field which opened by normal Input Field
Thank you.
Recommend
-
8
Angular Material Form Controls, Form Field and Input Examples by Didin J., updated on Oct 28, 2019
-
11
Closed Bug 1690865 Opened 3 months ago Closed 13 days ago...
-
5
Hi! Today we will learn how to use react hooks in a simple way in order to get strong basic fundamental in react hooks. The first thing we need to set up is of course react JS environment which you can refer to their
-
3
[JavaScript] Check if Value of Input Text Field is Integer April 23, 2018...
-
6
Check if Value of HTML Input Text Field is Integer in Go April 25, 2018...
-
10
Samannaya Roy November 1, 2022 3 minute read...
-
3
How to Allow Only Numeric Value in HTML Text Input Using jQuery 1398 views 2 years ago jQuery Use the RegEx...
-
13
How to Get the Value of Text Input Field Using JavaScript 1942 views 2 years ago Javascript Use the
-
8
Lars van der Zande December 14, 2023 1 minute rea...
-
7
"Value help only" input in sap.m.Input type control ...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK