Emanuele Ricci

March 21, 2018 2 minute read

openui5-inputforcesuggestions force user to only choose a value from suggestions

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