Add Row in a SAPUI5 Table using xmlModel

[former_member193964]

Hi, experts,

I want to add a new row in a table using a button.

My table was loaded by xmlModel and now i want to add a new row using a toolbar buton. I dont know how i can do it with xmlModel. I Saw some examples with JsonModel.

Anybody can help me?

Regards,

Marcelo

[vishnumohan_sharma · Accepted solution]

Did you get solution for that?????

[Former Member · Accepted solution]

HI,

Please find below the solution .. I have used local JSOn model , hope it will help you for xmlModel

Create a localodel

{

    "ITEMS": [

        {

            "ItemCode": "",

            "Product": "",

            "Uom": "",

            "Inqty": "",

            "IssueQty": ""

        }

    ]

}

------------------------------------------------------------------ Table is created in View in XML format

   <Table xmlns="sap.m" id="idItemTable" items="{/ITEMS}"

          visible="true" inset="false" mode="None" width="100%"

          includeItemInSelection="false" showUnread="false" showNoData="true"

          enableBusyIndicator="true" modeAnimationOn="true" showSeparators="All"

          swipeDirection="Both" fixedLayout="true">

          <columns>

            <Column xmlns="sap.m" hAlign="Center" vAlign="Middle"

              visible="true" minScreenWidth="Tablet" width="12em" demandPopin="true">

              <Text xmlns="sap.m" visible="true" text="Item Code"

                textDirection="Inherit" wrapping="true" textAlign="Begin">

              </Text>

            </Column>

            <Column xmlns="sap.m" hAlign="Center" vAlign="Middle"

              visible="true" minScreenWidth="Tablet" width="15em" demandPopin="true">

              <Text xmlns="sap.m" visible="true" text="Product/Brand"

                textDirection="Inherit" wrapping="true" textAlign="Begin">

              </Text>

            </Column>

            <Column xmlns="sap.m" hAlign="Center" vAlign="Middle"

              visible="true" minScreenWidth="Tablet" width="4em" demandPopin="true">

              <Text xmlns="sap.m" visible="true" text="UoM" textDirection="Inherit"

                wrapping="true" textAlign="Begin">

              </Text>

            </Column>

            <Column xmlns="sap.m" hAlign="Center" vAlign="Middle"

              visible="true" minScreenWidth="Tablet" width="11em" demandPopin="true">

              <Text xmlns="sap.m" visible="true" text="Quantity In Stock"

                textDirection="Inherit" wrapping="false" textAlign="Begin">

              </Text>

            </Column>

            <Column xmlns="sap.m" hAlign="Center" vAlign="Middle"

              visible="true" minScreenWidth="Tablet" width="11em" demandPopin="true">

              <Text xmlns="sap.m" visible="true" text="Quantity Issued"

                textDirection="Inherit" wrapping="true" textAlign="Begin">

              </Text>

            </Column>

            <Column xmlns="sap.m" hAlign="Center" vAlign="Middle"

              visible="true" minScreenWidth="Tablet" width="3em" demandPopin="true">

              <Text xmlns="sap.m" visible="true" text="Delete"

                textDirection="Inherit" wrapping="true" textAlign="Begin">

              </Text>

            </Column>

          </columns>

          <items>

            <ColumnListItem xmlns="sap.m" visible="true" type="Active"

              vAlign="Middle">

              <Input xmlns="sap.m" placeholder="Enter Item Code.." class="itemCodeFontDetails"

                value="{ItemCode}" textAlign="Center" type="Number" maxLength="18"

                showValueHelp="true" showSuggestion="true" valueHelpRequest="handleValueHelp">

                <customData>

                  <core:CustomData key="Matnr" value="Matnr" />

                </customData>

              </Input>

              <Text xmlns="sap.m" class="fontDetails" visible="true" text="{Product}"

                textDirection="Inherit" wrapping="true" textAlign="Center">

              </Text>

              <Text xmlns="sap.m" class="fontDetails" visible="true" text="{Uom}"

                textDirection="Inherit" wrapping="true" textAlign="Center">

              </Text>

              <Text xmlns="sap.m" class="fontDetails" visible="true" text="{Inqty}"

                textDirection="Inherit" wrapping="true" textAlign="Right">

              </Text>

              <Input xmlns="sap.m" visible="true" class="issueQtyFontDetails"

                value="{IssueQty}" placeholder="Enter Issue Qty..." editable="true"

                showValueStateMessage="true" textAlign="Right" type="Number"

                maxLength="17">

              </Input>

              <Button xmlns="sap.m" visible="true" type="Default" class="deleteButton"

                width="" enabled="true" icon="sap-icon://delete" iconFirst="true"

                activeIcon="" iconDensityAware="true" ariaDescribedBy=""

                ariaLabelledBy="" tap="" press="deleteRow">

              </Button>

            </ColumnListItem>

          </items>

        </Table>

--------------------------------------------------------------Controller on click of Add Row

addRow : function()

  {

    var modelData = selfView.getView().byId('idItemTable').getModel().getData();

    var model = selfView.getView().byId('idItemTable').getModel();

    model.setProperty('/ITEMS/' + model.oData.ITEMS.length,

    {

      Inqty : "",

      IssueQty : "",

      ItemCode : "",

      Product : "",

      Uom : ""

    });

    model.refresh(true);

    sap.ca.ui.message.showMessageToast("New Row Added..!!");

  },