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

Demo GIF (because we always need a gif in a post)

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)

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 than you can simply add a 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 controllr, you can easily do that but re-building the code with just a simple Grunt command:

npm install
grunt build

Credits

Emanuele Ricci

• Email: stermi@gmail.com
• Twitter: @StErMi
• LinkedIn: @Emanuele Ricci
• Medium: @StErMi

License

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