<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
      id="sap-ui-bootstrap" 
      data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.comp" 
      data-sap-ui-theme="sap_bluecrystal" 
      data-sap-ui-xx-bindingSyntax="complex" 
      data-sap-ui-resourceroots='{
				"test": "./"
			}'>
  </script>

  <script>
    var app = new sap.m.App({
      initialPage: "mainView"
    });
    
    var page = sap.ui.view({
      id: "mainView",
      viewName: "test.main",
      type: sap.ui.core.mvc.ViewType.XML
    });
    
    app.addPage(page);
    app.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>
// Code goes here

/* Styles go here */

<mvc:View
	height="100%"
	controllerName="test.main"
	xmlns:l="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
<l:VerticalLayout
	class="sapUiContentPadding"
	width="100%">

	<Label text="MultiInput" labelFor="MI" class="sapUiSmallMarginTop"/>
	
	<MultiInput enableMultiLineMode="true" id="MI"
		tokens="{
			path: 'json>/ProductCollection',
			sorter: { path: 'Name' }
		}">
		<tokens>
			<Token key="json>ProductId}" text="{json>Name}" />
		</tokens>
	</MultiInput>
	
</l:VerticalLayout>
</mvc:View>
sap.ui.controller("test.main", {
  onInit: function() {
    // Data model to provide inputs
    var oModel = new sap.ui.model.json.JSONModel();
    
    oModel.setProperty("/ProductCollection", [{
			  "ProductId": "HT-1000",
 	  		"Name": "Notebook Basic 15",
		  },
      {
			  "ProductId": "HT-2000",
	  		"Name": "Notebook Basic 14",
		}]);
		
    this.getView().setModel(oModel, 'json'); 
    
    // Validator
    var oMultiInput = this.getView().byId('MI');
    oMultiInput.addValidator(function(oEvent){
      return new sap.m.Token({key: oEvent.text, text: oEvent.text });
    });
  }
});