SAPPUI5 get selected item from table

Question

I have build a table in SAPUI5, in my table I have one input field and have two buttons. I have attached a image of my table:

Users are able to edit and change quantity value of product items. Once an user clicks on the tick button, it will get the quantity value and update the odata service in the backend. My problem now is I cant get the Quantity value that I entered when I click on the tick button.

The following is my code:

view.xml

<Table id="idProductsTable" inset="false" items="{path:'orderModel>/TXN_ORDDTLs'}">
            <columns>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Name"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Quantity"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="UOM"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Price"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Subtotal"/>
                </Column>
                <Column id="buttonColumn1" width="5%" minScreenWidth="Tablet" demandPopin="true" popinDisplay="WithoutHeader" hAlign="Right" class="sapMTableContentMargin">
                    <header>
                        <Label id="cartItemEdit" text="Cancel" visible="{= ${device>/system/phone}}"/>
                    </header>
                </Column>
                <Column id="buttonColumn2" width="5%" minScreenWidth="Tablet" demandPopin="true" popinDisplay="WithoutHeader" hAlign="Right" class="sapMTableContentMargin">
                    <header>
                        <Label id="cartItemDelete" text="Cancel" visible="{= ${device>/system/phone}}"/>
                    </header>
                </Column>
            </columns>
            <items>
                <ColumnListItem vAlign="Middle">
                    <cells>
                        <Text text="{orderModel>PRODUCT_NO}"/>
                        <Input id="itemPrdQty" value="{orderModel>PRD_QTY}" width="70px"/>
                        <Text text="{orderModel>UOM_CD}"/>
                        <Text text="{orderModel>PRICE}"/>
                        <Text text="{orderModel>GROSS_AMT}"/>
                        <!-- Add Button -->
                        <Button id="editCartButton" tooltip="Edit Item" icon="sap-icon://accept" press="editCartItemPressed" type="Transparent"/>
                        <Button id="deleteCartButton" tooltip="Delete Item" icon="sap-icon://decline" press="deleteCartItemPressed" type="Transparent"/>
                    </cells>
                </ColumnListItem>
            </items>
        </Table>

Controller.js

        editCartItemPressed: function(oEvent){
            var NoOfItems = this.getView().byId("itemPrdQty").getValue();
            console.log(NoOfItems);
            
    
        },

Any solutions how to get my quantity value?

Answer 1

Ok, I see what you are going for here, but if you want it to fit the fiori guidelines here is what you need to do:

• add to your table mode="SingleSelect":

   <Table id="idProductsTable" mode="SingleSelect" inset="false" 
          items="{path:'orderModel>/TXN_ORDDTLs'}">
  

• remove the buttons from your table

• recreate the buttons inside a table toolbar

• change your method to this:

    editCartItemPressed: function() {
        var oItem= this.getView().byId("idProductsTable").getSelectedItem();
        var oEntry = oItem.getBindingContext("yourODataModel").getObject();
        console.log(oEntry.Quantity); //your quantity you want to update
  
        //yourODataModel.update(oItem.getBindingContextPath(), oEntry, {
        //    success: function(){}, // your success handler
        //    error:   function(){} // your error handler
        //});
    },
  

Result: you have a table with radio buttons. With those you can select a row and edit/delete via your buttons in the tables toolbar.

I advice you to check the Fiori designguidelines before creating apps and if you are unsure of how to achieve the wanted outcome check the samples at: https://sapui5.hana.ondemand.com/1.54.8/#/controls