Skip to Content
Author's profile photo Emanuele Ricci

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

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.


You can checkout a demo here:


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.


And than you can simply add the MultiInputDialog custom control

			text="{oData>ContactName}, {oData>ContactTitle}" />
			info="{oData>ContactName}, {oData>ContactTitle}" />
		<Token key="{oData>CustomerID}" 
		text="{oData>ContactName}, {oData>ContactTitle}" />



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.



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


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


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Nitin Kant
      Nitin Kant

      Hi Emanuele Ricci,

      Thanks for this great blog.

      I am facing an issue while using this control. After adding the Dependencies in Manifest and Resource root. I am getting below error in XML View. Could you please help me in resolving this issue.


      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Hi Nitin Kant you're simply missing the core namespace in the View XML declaration 😉