sapui5 - Add a New Item to a Table / List

Question

I have a fragment / view written in XML which contains a simple table with some columns and one ColumnListItem:

<m:Table id="CorrectiveActionsTable">
  <m:columns>
    <m:Column>
      <m:Text text="Lfd. Nr"/>
    </m:Column>
    <m:Column width="30%">
      <m:Text text=""/>
    </m:Column>
    <m:Column>
      <m:Text text="gefordert von"/>
    </m:Column>
    <m:Column>
      <m:Text text="Durchführungsverantwortung"/>
    </m:Column>
    <m:Column>
      <m:Text text="Planungstermin"/>
    </m:Column>
    <m:Column>
      <m:Text text="IST-Termin"/>
    </m:Column>
  </m:columns>
  <m:ColumnListItem id="ListItem_00">
    <m:Text text="1"/>
    <m:TextArea
      value="senf"
      rows="6"
      width="100%"
    />
    <m:Input placeholder="bla"/>
    <m:Input placeholder="bla2"/>
    <m:DatePicker placeholder="bla3"/>
    <m:DatePicker placeholder="bla4"/>
  </m:ColumnListItem>
</m:Table>
<m:HBox>
  <m:Button
    text="Add Button"
    visible="true"
    press="onAddButton"
    icon="sap-icon://add"
  />
</m:HBox>

The Button should be used to add a new ColumnListItem to the Table.
I think I should write the onAddButton function in the controller but I don't know where to start.

For now, my controller looks like this:

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/ColumnListItem",
  "sap/m/Text",
  "sap/m/TextArea",
  "sap/m/Input",
  "sap/m/DatePicker"
], function(Controller, ColumnListItem, Text, TextArea, Input, DatePicker) {
  "use strict";

  return Controller.extend("...", {
    onAddButton: function(oEvent) {
      var columnListItemNewLine = new ColumnListItem({
        cells: [
          new Text({
            text: "1"
          }),
          new TextArea({
            value: "senf",
            rows: "6",
            width: "30%"
          }),
          new Input({
            type: "text",
            placeholder: "bla"
          }),
          new Input({
            type: "text",
            placeholder: "bla2"
          }),
          new DatePicker({
            placeholder: "bla3"
          }),
          new Datepicker({
            placeholder: "bla4"
          })
        ]
      });
      this._oTable.addItem(columnListItemNewLine);
    }
  });
});

And I'm pretty sure there is a better way to do this than my approach.

Answer 1

1. Bind the collection of data to the <items> aggregation of table.
2. Add a new entry to the model (instead of to the UI directly) when the user clicks on Add.

Thanks to the aggregation binding, UI5 will create a new ColumnListItem for you and you did not break the MVC pattern. Here are some examples, using..:

v2.ODataModel

• Call createEntry and later submitChanges to send it to backend.
• Demo: plnkr.co/F3t6gI8TPUZwCOnA (Click on the Add button to create a new "Flight").
• Documentation: OData V2 - Creating Entities

v4.ODataModel

• See the documentation topic OData V4 - Creating an Entity.

JSONModel

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%"
    displayBlock="true"
  >
    <Table sticky="ColumnHeaders" items="{/}">
      <headerToolbar>
        <OverflowToolbar>
          <Title text="My Items ({= %{/}.length})"/>
          <ToolbarSpacer/>
          <Button
            icon="sap-icon://add"
            press="onAddItemPress"
          />
        </OverflowToolbar>
      </headerToolbar>
      <columns>
        <Column>
          <Text text="Column 1" />
        </Column>
        <Column>
          <Text text="Column 2" />
        </Column>
      </columns>
      <ColumnListItem>
        <Text text="{col1}" />
        <Text text="{col2}" />
      </ColumnListItem>
    </Table>
  </mvc:View>`,
  models: new JSONModel([]),
}).then(view => view.placeAt("content"))));

function onAddItemPress(event) {
  const model = event.getSource().getModel();
  model.setProperty("/", model.getProperty("/").concat({
    col1: "newFoo",
    col2: "newBar",
  }));
}

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-preload="async"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
  data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>