CODEWITHSUNDEEP
sapui5sap-fiori
Emre
Emre

Reputation: 153

How can I bin data to table or list in Sapui5

I want to get data from user input and insert that data into a table or list. When the user clicks the insert button, the data will be inserted into the table. If the user clicks the delete button, the selected row will be deleted.

This my home.view.xml:

<Button text="insert" type="Unstyled" press="insContent"></Button>
<Button text="delete" type="Unstyled" press="deleteContent"></Button>
<l:Grid defaultSpan="L12 M12 S12" width="auto">
    <l:content>
        <f:SimpleForm columnsL="1" columnsM="1" editable="false" emptySpanL="4" emptySpanM="4" id="SimpleForm" labelSpanL="3" labelSpanM="3" layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024">
            <f:content>
                <Label text="Name" id="lname"></Label>
                <Input value="" id="iname"></Input>
                <Label text="surname" id="lsurname"></Label>
                <Input value="" id="isurname"></Input>
            </f:content>
        </f:SimpleForm>
    </l:content>
</l:Grid>
<Table class="nwEpmRefappsShopControlLayout" growing="true" growingScrollToLoad="true" id="catalogTable">
    <columns>
        <Column demandPopin="true" id="descriptionColumn"></Column>
        <Column demandPopin="true" id="descriptionColumn2"></Column>
    </columns>
    <ColumnListItem class="nwEpmRefappsShopTableItemLayout" id="columnListItem" type="Active" vAlign="Middle">
        <cells>
            .
            .
        </cells>
    </ColumnListItem>
</Table>

This my home.controller.js:

insContent: function () {
    // Get data from input 
    this.byId("iname").getValue();
    this.byId("isurname").getValue();
}

Upvotes: 1

Views: 3736

Answers (2)

Alejandro Oyarz&#250;n
Alejandro Oyarz&#250;n

Reputation: 46

I don't know how to make xml views but maybe this can help you.

First, you need to have a table with a model. For example (oTableData is a sap.m.Table object):

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: aData});
oTableData.setModel(oModel);
oTableData.bindItems("/modelData", oRow);

Also you need an array for store data (in index.html).

var aData = [];

For add users you need the following function.

save: function(firstName, lastName) {
    // Add object to array
    aData.push({firstName: firstName, lastName: lastName});

    // Refresh model
    var oTableData = sap.ui.getCore().byId(this.createId("table"));
    oTableData.getModel().refresh();
}

Finally for delete users you have to add this to the table.

oTableData.setMode(sap.m.ListMode.Delete);
oTableData.attachDelete(function(oEvent) {
    var oSelectedItem = oEvent.getParameter("listItem");
    var sItemName = oSelectedItem.getBindingContext().getProperty("firstName");
    var path = oSelectedItem.getBindingContext().getPath();
    path = path.substring(path.lastIndexOf('/') +1);
    var model = oSelectedItem.getModel();
    var data = model.getProperty('/modelData');
    data.splice(parseInt(path), 1);
    model.setProperty('/modelData', data);

    sap.m.MessageToast.show("Deleted");
});

I make a repository for reference:

https://github.com/aosepulveda/sapui5-model-crud

Example

Upvotes: 2

Rahul Bhardwaj
Rahul Bhardwaj

Reputation: 2353

You can fetch the first and last name using ids after clicking on the insert button. Once you have the values, create an object 

var object = {
    firstName: user_enteredValue,
    lasName: userEnteredSirName
};

Then, insert into your table model, i.e.

table.getModel().getData().push(object);
table.getModel().refresh();

It will update your table with a new row.

Upvotes: 0

Related Questions