Delete token from SAPUI5 Multi Input Field with Data Binding

Question

in my SAPUI5 app I am using a Multi Input Field with tokens which are bound to a JSON Model. Newly added entries are saved in the JSON Model. However, when deleting a token by pressing the "x" next to the token text, the token disappears from the multi input field. But when adding a new token the deleted one reappears. How can I ensure that the deleted entry is also deleted from the JSON Model?

This is my current code for adding the token to the model:

multiInputField.addValidator(function(args){
                MessageBox.confirm("Do you really want to add Token\"" + args.text + "\"?", {
                    onClose: function(oAction) {
                        if (oAction === MessageBox.Action.OK){
                            var oToken = new Token({key: args.text, text: args.text});
                            args.asyncCallback(oToken);
                            var aFields = sap.ui.getCore().getView().getModel("myModel").getProperty("/Tokens");
                            var oNewFields= {
                                Tokens: args.text
                            };
                            aFields .push(oNewFields);
                            sap.ui.getCore().getView().getModel("myModel").setProperty("/Tokens", aFields );
                            sap.ui.getCore().getView().getModel("myModel").refresh();
                        } else {
                            args.asyncCallback(null);
                        }
                    },
                    title: "Add Token"
                    });
                  return sap.m.MultiInput.WaitForAsyncValidation;
            });

Answer 1

I guess we can use "tokenUpdate" event for this.

For example, given that I have this MultiInput in my view:

    <MultiInput width="500px" id="multiInput" suggestionItems="{ path: 'dataModel>/data'}" showValueHelp="true" tokenUpdate="onTokenUpdate">
                    <core:Item key="{dataModel>key}" text="{dataModel>value}"/>
                </MultiInput>

then in my controller I can handle this like :

onTokenUpdate: function(oEvent) {
        var sType = oEvent.getParameter("type");
        if (sType === "removed") {
            var sKey = oEvent.getParameter("removedTokens")[0].getProperty("key");
            var oModel = this.getView().getModel("dataModel");
            var aData = this.getView().getModel("dataModel").getProperty("/data");
            for (var i = 0, len = aData.length; i < len; i++) {
                var idx;
                console.log(sKey + "-" + aData[i].key);
                if (aData[i].key === sKey) {
                    idx = i;
                }
            }
            aData.splice(idx, 1);
            oModel.setProperty("/data", aData);
            console.log(oModel);
        }
    }

And this is my json:

{
"data": [
    {
        "key": "token1",
        "value": "token1"
    },
    {
        "key": "token2",
        "value": "token2"
    }
]

}