How to add the data to table rows in xml view

Question

I have the table as below:

XML view of table to add:

<Table id="TestTable" selectionMode="Single" rows="{path: '/Collection'}"  visibleRowCount="5">
                    <columns>
                        <Column width="4rem" >
                            <m:Text text="S.No" />
                            <template>
                                <m:Text text="{serialId}" wrapping="false"  />
                            </template>
                        </Column>
                        <Column>
                            <m:Text text="Option" />
                            <template>
                                <m:Text text="{Option}" wrapping="false" />
                            </template>
                        </Column>
                        <Column>
                            <m:Text text="Quantity" />
                            <template>
                                <m:Text text="{Quantity}" wrapping="false" />
                            </template>
                        </Column>
                        <Column>
                            <m:Text text="Pin" />
                            <template>
                                <m:Text text="{Batch}" wrapping="false" />
                            </template>
                        </Column>
                        <Column hAlign="End" width="4rem" >
                            <m:Text text="Edit" />
                            <template>
                                <m:Button icon="sap-icon://edit" press="editRow" type="Reject"/>
                            </template>
                        </Column>
                        <Column hAlign="End" width="4rem">
                            <m:Text text="Drag" />
                            <template>
                                <m:Button icon="sap-icon://grid"/>
                            </template>
                        </Column>
                        <Column hAlign="End" width="4rem">
                            <m:Text text="Delete" />
                            <template>
                                <m:Button icon="sap-icon://delete" press="moveToTable1" type="Reject"/>
                            </template>
                        </Column>
                    </columns>
                </Table>

For the above to add data to rows I am using a dialog box with a form and i have get those values as:

Getting the values from dialog as :

    var OptionValue = sap.ui.getCore().byId("XOption").getSelectedKey(); //data from fragment
    var QuantityValue = sap.ui.getCore().byId("ZQuantity").getSelectedKey();
    var PinValue = sap.ui.getCore().byId("CPin").getSelectedKey();

I am trying to add these values every time clicking ok in dialog box (add to the rows )

I tried as below in ok function (part of func i created is below):

    var oTable = this.byId("TestTable");
      var oData = {
        WaferCollection: [
          {
            Option : OptionValue,
            Batch: QuantityValue,
            Quantity: PinValue,
          }
        ]
      };;

      var testmodel = new JSONModel();
      testmodel .setData(oData);

      testmodel .getProperty("/collection").push(data);
      testmodel .refresh(true);
      this.pressDialog.close(); // close dialog 

But this didn't add as expected

The closest example I am trying to achieve is in the below link:

plunker link

But the functionality here is not working as expected , it is not adding correctly when we add or edit

Are there any guiding links on how to bind the data to table, I have been seeing a lot of examples on items but not rows

Any help is appreciated for the above Q and would learn from it , TIA

Answer 1

Before opening the dialog, create a new entry in your collection, and bind the dialog fields to it. Then, you don't need to get the input values one by one or manually change the collection.

To create the new entry, add this to the part of your controller code where you open the dialog:

this.getView().addDependent(this.pressDialog)
var oNewItem = this.getView().getModel().createEntry("/Collection")
this.pressDialog.setBindingContext(oNewItem)
                .open()

See the UI5 documentation for more details on ODataModel#createEntry() and Element#addDependent().

Next, bind the selectedKey properties of the three controls inside the dialog, like so: selectedKey="{Option}".

For a more complete example, see Week 4 / Unit 1 of the OpenSAP course on UI5 (especially the pdf with code snippets).