Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ericci
Active Contributor
openui5-inputforcesuggestions control extends Input allowing developers to force user to choose an option from the Suggestions aggregation.

Demo


You can checkout a demo with different configurations here: stermi.github.io/openui5-inputforcesuggestions/test/demo



Source Code


Control source code is pretty simple. We just check on onChange event (usually when you hit Enter or focus out the control) if the current Input value this.getValue() is equal to this._sSelectedValue (this value is set when user choose a Suggestion)



/*!
* ${copyright}
*/

// Provides control it.designfuture.inputforcesuggestions.InputSuggestions
sap.ui.define([
'sap/m/Input'
], function(Input) {
"use strict";


/**
* Constructor for a new InputSuggestions.
*
* @param {string} [sId] id for the new control, generated automatically if no id is given
* @param {object} [mSettings] initial settings for the new control
*
* @class
* InputSuggestions OpenUI5 control that extend Input to allow developer to force suggestion selection
* @extends sap.m.InputBase
* @version ${version}
*
* @constructor
* @public
* @since 1.40
* @name it.designfuture.inputforcesuggestions.InputSuggestions
*/
var InputSuggestions = Input.extend("it.designfuture.inputforcesuggestions.InputSuggestions", {

metadata : {
properties : {
forceSuggestionSelection : {type : "boolean", group : "Appearance", defaultValue : true}
}
},
aggregations: {},
events: {},
renderer: {}
});

InputSuggestions.prototype.onChange = function(oEvent, mParameters, sNewValue) {
Input.prototype.onChange.apply(this, arguments);

if( this.getForceSuggestionSelection() ) {
//check if we have an item selected
//check if the item selected value is the same as the one from this.getValue()
if( this._sSelectedValue !== this.getValue() ) {
this.setValue("");
return;
}
}
};

return InputSuggestions;

}, /* bExport= */ true);

Usage


Configure manifest.json


Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.



"sap.ui5": {
...
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
...
"it.designfuture.inputforcesuggestions": {}
}
},
"resourceRoots": {
"it.designfuture.inputforcesuggestions": "./thirdparty/it/designfuture/inputforcesuggestions/"
}
}

Add the custom control inside an XML View


First of all add the namespace



xmlns:df="it.designfuture.inputforcesuggestions"

And then you can simply add an InputSuggestions



<df:InputSuggestions
showSuggestion="true"
suggestionItems="{/suggestions}" >
<df:suggestionItems>
<core:Item key="{key}" text="{text}" />
</df:suggestionItems>
</df:InputSuggestions>

or if you want a more complex scenario (tabular suggestions)



<df:InputSuggestions
type="Text"
showSuggestion="true"
showTableSuggestionValueHelp="false"
forceSuggestionSelection="true"
suggestionRows="{/ProductCollection}">
<df:suggestionColumns>
<Column
hAlign="Begin"
popinDisplay="Inline"
demandPopin="true">
<Label text="Name"/>
</Column>
<Column
hAlign="Center"
popinDisplay="Inline"
demandPopin="true"
minScreenWidth="Tablet">
<Label text="Product ID"/>
</Column>
<Column
hAlign="Center"
popinDisplay="Inline"
demandPopin="false"
minScreenWidth="Tablet">
<Label text="Supplier Name"/>
</Column>
<Column
hAlign="End"
popinDisplay="Inline"
demandPopin="true">
<Label text="Price"/>
</Column>
</df:suggestionColumns>
<df:suggestionRows>
<ColumnListItem>
<cells>
<Label text="{Name}"/>
<Label text="{ProductId}"/>
<Label text="{SupplierName}"/>
<Label
text="{
parts:[{path:'Price'},{path:'CurrencyCode'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: true}
}"/>
</cells>
</ColumnListItem>
</df:suggestionRows>
</df:InputSuggestions>

Parameters



Events


None



Methods


None



Build


If you would like to extend and customize the controller, you can easily do that but re-building the code with just a simple Grunt command:



npm install
grunt build

Credits


Emanuele Ricci




License


This project is licensed under the Apache 2.0 License — see the LICENSE.md file for details.

Labels in this area