在SAPUI5表中添加新行的按钮

Question

I am trying to add new lines on a SAPUI5 table by a click of a button. I have seen plenty of online tutorials but I have not found exactly my use case.

The JSON is loaded through a mock server for now (for testing purposes and has this structure:

{
  "Invoices": [
    {
      "ProductName": "Pineapple",
      "Quantity": 21,
      "ExtendedPrice": 87.2000,
      "ShipperName": "Fun Inc.",
      "ShippedDate": "2015-04-01T00:00:00",
      "Status": "A"
    },
    ...
  ]
}

I have a table that is defined like this in the view :

<mvc:View controllerName="stepbystep.demo.wt.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true">
<Table id="ins" items="{ path : 'invoice>/Invoices', sorter : { path : 'ProductName' } }">
    <headerToolbar>
        <Toolbar>
            <Button icon="sap-icon://add" text="Row" press="addRow"/>
            <Button icon="sap-icon://display" text="Row" press="fetchRecords"/>
        </Toolbar>
    </headerToolbar>
    <columns>
        <Column hAlign="Right" minScreenWidth="Small" demandPopin="true" width="4em">
            <Text text="{i18n>columnQuantity}"/>
        </Column>
        <Column>
            <Text text="{i18n>columnName}"/>
        </Column>
        <Column minScreenWidth="Small" demandPopin="true">
            <Text text="{i18n>columnStatus}"/>
        </Column>
        <Column minScreenWidth="Tablet" demandPopin="false">
            <Text text="{i18n>columnSupplier}"/>
        </Column>
        <Column hAlign="Right">
            <Text text="{i18n>columnPrice}"/>
        </Column>
    </columns>
    <items>
        <ColumnListItem type="Navigation" press="onPress">
            <cells>
                <ObjectNumber number="{invoice>Quantity}" emphasized="false"/>
                <ObjectIdentifier title="{invoice>ProductName}"/>
                <Text text="{ path: 'invoice>Status', formatter: '.formatter.statusText' }"/>
                <Text text="{invoice>ShipperName}"/>
                <ObjectNumber
                    number="{ parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }"
                    unit="{view>/currency}" state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

and the controller contains this function (I am only pasting the part that works):

addRow: function() {
    var oList = this.getView().byId("ins");
    var oDt = oList.getBinding("items").getModel().oData;
}

However, I am not sure how to proceed. I have tried push() in the model, but I am getting errors. What I was thinking of doing now is to add an empty row in oDt and bind it to the table, but I am not sure how to proceed with this, and whether it is the optimal solution.

EDIT: How to Add a New ColumnListItem to a Table was marked as potential duplicate. This question is on the same topic, but the approach of the OP does not seem to match my use case (I am new to SAPUI5, so I might be wrong - in which case, please forgive me).

Answer 1

JSONModel :

this.getView().getModel('invoice').getProperty('/Invoices').push({/* new invoice data */})

ODataModel :

this.getView().getModel('invoice').create('/Invoices', {/* new invoice data */})

or

this.getView().getModel('invoice').createEntry('/Invoices', {/* new invoice data */})
this.getView().getModel('invoice').submitChanges();