Skip to Content

Add row to UI5 table from other table

Dear Experts,

I am new the SAP UI5 so excuse me if my question is a bit trivial.

I have a functionality where I have a table with an 'Add' button. On press of the button I want to display another table to choose a data row. Once the user selects a row he wants, I want a button on the second table to return the data back to the first table and insert as a row there.

I found one link: JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="http://static.jsbin.…

It helps but is not exactly what I need.

Any pointers will be appreciated.

Kind Regards,

Saumya Govil

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Best Answer
    Sep 18, 2014 at 08:31 PM

    Hi Samuya

    Here is an example. There are many ways to do it though

    Thanks

    -D

    Add comment
    10|10000 characters needed characters exceeded

    • Thanks a lot Dennis and Frank for the help!

      The answers helped me solve the issue.

      I know the question was a bit basic, but is probable just a part of my learning process.

      Thanks again!

      Regards,

      Saumya

  • Sep 18, 2014 at 01:07 PM

    Hi Govil,

    if you follow the Model View Controller contept (see OpenUI5 SDK - Demo Kit), you just need to add the row which has been selected by the user, to the model data which is bound to the main table.

    More information on Models and Data Binding in Applications can be found here: OpenUI5 SDK - Demo Kit.

    Regards, Frank

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Saumya,

      here is a very basic example.

      Regards, Frank

      var result = new sap.ui.model.json.JSONModel();
      sap.ui.getCore().setModel(result);
      oJsonData = {
      Category_Sales_for_1997 : [
      { CategoryName : "Beverages", CategorySales : "11.11"},
      { CategoryName : "Something", CategorySales : "33.33"},
      { CategoryName : "Confections", CategorySales : "22.22"}
      ]
      };
      result.setData(oJsonData);
      // Create the column templates
      var nameColumnTemplate = new sap.ui.commons.TextField({
      value: "{CategoryName}"
      });
      var salesColumnTemplate = new sap.ui.commons.TextField({
      value: "{CategorySales}"
      });
      var oButton = new sap.ui.commons.Button({
      text: "Add a Row",
      press: function(){
      var oModel = sap.ui.getCore().getModel();
      var oData = oModel.getData();
      oData.Category_Sales_for_1997.push({
      CategoryName : "New Row", CategorySales : "12.34"
      });
      oModel.updateBindings();
      }
      })
      var oTable = new sap.ui.table.Table({ // create Table UI
      extension : [oButton],
      columns : [
      {label: "Name", template: nameColumnTemplate },
      {label: "Sales", template: salesColumnTemplate }
      ]
      });

      oTable.setModel(result); // bind JSON model to Table
      oTable.bindRows({path: "/Category_Sales_for_1997"} ); // bind the table rows to an array oTable.placeAt("content"); // place Table onto UI