openui5-multiinputdialog MultiInput with Dialog made easy

In the latest projects I’ve developed I used a lot sap.m.MultiInput. It’s a really usefull control with some bugs and pain that OpenUI5 team tried to fix along the way

• tokenChange has been deprecated since 1.46 but they never backported the new tokenUpdate evento to previous version
• sap.m.MultiInput tokenChange called on not visible Controllers issue has been marked as wontfix

Anyway, if you look at the MultiInput Data Binding sample on the OpenUI5 Explorer you can see that the never implement the Value Help part that allow you to open a Select Dialog to easily select items from a pool of items with a search field on top. It’s really useful and usually you take those items from the same pool of the suggestions/tokens of the MultiInput.

99% of the times you always need a Value Help with a Multi Input and as I said before the common scenario is when items are in common (between tokens, suggestions and value help items).

This is the reason why I created openui5-multiinputdialog to speedup and simply this process.

openui5-multiinputdialog is a SAPUI5 Custom Control that extends a MultiInput allowing you to easily configure the SelectDialog with items suggestion with just a bunch of lines of code.

Demo

You can checkout a demo here: https://stermi.github.io/openui5-multiinputdialog/test/demo/

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.multiinputdialog": {}
		}
	},
	"resourceRoots": {
		"it.designfuture.multiinputdialog": "./thirdparty/it/designfuture/multiinputdialog/"
	}
}

Add the custom control inside an XML View

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

xmlns:df="it.designfuture.multiinputdialog"

And than you can simply add the MultiInputDialog custom control

<df:MultiInputDialog
	suggestionItems="{oData>/Customers}"
	tokens="{oDataModel>/tokens}"
	tokenUpdate="onTokenUpdate"
	selectDialogItems="{oData>/Customers}"
	selectDialogFilterKeys="ContactName,ContactTitle"
	selectDialogMultiSelect="true">
	<df:suggestionItems>
		<core:Item 
			key="{oData>CustomerID}" 
			text="{oData>ContactName}, {oData>ContactTitle}" />
	</df:suggestionItems>
	<df:selectDialogItems>
		<StandardListItem 
			title="{oData>CustomerID}" 
			info="{oData>ContactName}, {oData>ContactTitle}" />
	</df:selectDialogItems>
	<df:tokens>
		<Token key="{oData>CustomerID}" 
		text="{oData>ContactName}, {oData>ContactTitle}" />
	</df:tokens>
</df:MultiInputDialog>

Parameters

As I said this custom control extends MultiInput so you are inheriting all MultiInput’s properties, events and methods.

You also have all SelectDialog options to configure the custom control with.

Methods

Events

MultiInputDialog is extending MultiInput so you also have all it’s event inherited

Build

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

npm install 
 grunt build

Links

• Author: Emanuele Ricci
• openui5-multiinputdialog repo
• MultiInput Documentation