How to delete a row from a Table in SAPUI5 Application when I used Model as XMLModel

sapui5

I have created SAPUI5 application, in that I have loaded data from external .xml file into a table, it was fine. Now, I am trying to delete a specific row from that table.
For this purpose, I use this code:

var oModel = new sap.ui.model.xml.XMLModel();
oModel.loadData("Deployments.xml", "", false);
sap.ui.getCore().setModel(oModel);
oTable.bindRows("/service");   // here "service"  is the root element of xml file
    var oTable = new sap.ui.commons.Button({
    text: "Delete Service",
    press: function() {
        var idx = oTable.getSelectedIndex();
        if (idx !== -1) {
            var m = oTable.getModel();
            var data = m.getData();
            var removed = data.splice(idx, 1); // error showing at this line
            m.setData(data);
            sap.m.MessageToast.show(JSON.stringify(removed[0]) + 'is removed');

        } else {
            sap.m.MessageToast.show('Please select a row');
        }
    }
});

But, I am getting error at the line: var removed = data.splice(idx, 1);. However, the same code is good for when model is JSON. How can I delete a specific row from a table when model XMLModel?

Best Solution

It is a lot easier an more reliable to use a Bindings BindingPath to manipulate data belonging to a particular binding. Here is your adapted sample for a XMLModel:

press: function() {
    var iIdx = oTable.getSelectedIndex();
    var sPath = oTable.getContextByIndex(iIdx).getPath();
    var oObj = oTable.getModel().getObject(sPath);
    oObj.remove();
    oTable.getModel().refresh();
}

This way you save the hazzle of dealing with the XML structure and furthermore this will scale with any change in the binding path you might introduce in the future.

BR Chris

Related Solutions

Html – SAPUI5: How to display row index in table

This can be done without having to add a "rowIndex" property to the model, but instead by using a formatter function which gets the index from the BindingContext path (which in this example would look like "/modelData/x" where x is the index of the item in the model).

Please see the modified code below. Note the use of the formatRowNumber function.

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8"/>
</head>
<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
    data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
    data-sap-ui-resourceroots='{
            "sap.ui.demo.wt": "./"
         }'>    
</script>
<script>
    sap.ui.getCore().attachInit(function() {
        //Define some sample data
        var formatRowNumber = function(val) {
            if(!this.getBindingContext()) return null;
            var index = this.getBindingContext().getPath().split("/")[2];
            // (an example of path value here is "/modelData/0")
            return parseInt(index) + 1;
        };

        var aData = [
            {lastName: "Dente", name: "Al"},
            {lastName: "Friese", name: "Andy"},
            {lastName: "Mann", name: "Anita"},
            {lastName: "Schutt", name: "Doris"},
            {lastName: "Open", name: "Doris"},
            {lastName: "Dewit", name: "Kenya"}
        ];

        //Create an instance of the table control
        var oTable2 = new sap.ui.table.Table({
            visibleRowCount: 7,
            firstVisibleRow: 3
        });

        //Define the columns and the control templates to be used
       oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Index"}),
            template: new sap.ui.commons.TextView().bindProperty("text", {path: '', formatter:formatRowNumber}),
            width: "200px"
        }));

        oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Last Name"}),
            template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
            width: "200px"
        }));

        oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "First Name"}),
            template: new sap.ui.commons.TextField().bindProperty("value", "name"),
            width: "200px"
        }));

        //Create a model and bind the table rows to this model
        var oModel2 = new sap.ui.model.json.JSONModel();
        oModel2.setData({modelData: aData});
        oTable2.setModel(oModel2);
        oTable2.bindRows("/modelData");
        //Initially sort the table
        oTable2.sort(oTable2.getColumns()[0]);
        //Bring the table onto the UI
        oTable2.placeAt("content");


    });
</script>
<body class="sapUiBody" id="content">
</body>
</html>

See the screenshot below:

Related Question