<!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 });
});
}
});