Example of Multi-Input

Click here and follow my SAP UI5/FIORI snippets and information Page
I have taken Multi-Input control and below created a table with hard coded data .When users press table's line item then ID of that line item will be displayed in Multi-Input field.User can't pushed duplicate ID in Multi-Input field.User can delete particular ID from Multi-Input field.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<mvc:View controllerName="multiInputWithTokenEG.controller.S1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

displayBlock="true" xmlns="sap.m">

<App>

<pages>

<Page title="{i18n>title}">

<content>

<MultiInput id="multiId" showValueHelp="false">

</MultiInput>

<Table itemPress="handleMethodPress" >

<columns>

<Column>

<Text text="ID" />

</Column>

<Column>

<Text text="Name" />

</Column>

<Column>

<Text text="Mob" />

</Column>

</columns>

<ColumnListItem type="Active">

<cells>

<Text text="10000" />

<Text text="Vikas Singh" />

<Text text="1111111111" />

</cells>

</ColumnListItem>

<ColumnListItem type="Active">

<cells>

<Text text="11000" />

<Text text="Senjeev Singh" />

<Text text="1111111111" />

</cells>

</ColumnListItem>

<ColumnListItem type="Active">

<cells>

<Text text="11100" />

<Text text="Kunal Singh" />

<Text text="4111111111" />

</cells>

</ColumnListItem>

<ColumnListItem type="Active">

<cells>

<Text text="11110" />

<Text text="Gopal Singh" />

<Text text="3111111111" />

</cells>

</ColumnListItem>

<ColumnListItem type="Active">

<cells>

<Text text="11112" />

<Text text="Rahul Singh" />

<Text text="2111111111" />

</cells>

</ColumnListItem>

</Table>

</content>

</Page>

</pages>

</App>

</mvc:View>

Controller Part

sap.ui.define([

"sap/ui/core/mvc/Controller"

], function(Controller) {

"use strict";

return Controller.extend("multiInputWithTokenEG.controller.S1", {

onInit: function() {

// Creating custom array at the time of initialization of application.

this.ArrTok = [];

},

// When user press table's line item then this method will call.

handleMethodPress:function(oEvent){

var that=this;

var id=oEvent.getParameter("listItem").getCells()[0].getText();

var flag;

if(this.ArrTok.length===0){

this.ArrTok.push({"ID":id});

}else{

for(var i=0;i<this.ArrTok.length;i++){

flag = 0;

if(id===this.ArrTok[i].ID){

flag = 1;

sap.m.MessageToast.show("Already exist");

break;

}

}

if(flag===0){

this.ArrTok.push({"ID":id});

}

}

  // Passing array to model .

var json = new sap.ui.model.json.JSONModel(this.ArrTok);

var multiInput = this.byId("multiId");

multiInput.unbindAggregation();

// "Vikas" is just a alias name here.

this.getView().setModel(json,"Vikas");

var tem = new sap.m.Token({

text:"{Vikas>ID}",

// When user delete ID from Multi-Input then this method will call.

"delete" : function(oEvent){

var id = oEvent.getParameter("token").getText();

oEvent.getParameter("token").destroy();

for(var i=0;i<that.ArrTok.length;i++){

if(id===that.ArrTok[i].ID){

that.ArrTok.splice(i,1);

break;

}

}

}

});

// Binding tokens to Multi-Input field.

multiInput.bindAggregation("tokens","Vikas>/",tem);

},

});

});

Result

   When user press on table's line item then ID will be set in Multi-Input field.

    User selected  first line item of table.

    User selected  last line item of table.

    User can delete particular item from Multi-Input field .

    After deleting there is only one item in Multi-Input field.

    User can't push same ID in Multi-Input field.