Add and Delete operations on List Control in SAPUI5



In this tutorial blog you will learn different operations on a list control. Here we will be using sap.m.List control and CustomListItem template for the list control. 

So here we will see:
1) Add a new list item on click of a button.
2) Delete a list item
3) Filtering the list item on the basis of drop down menu, i.e. we will be using a sap.m.Select control for filtering the list.

So here we already have created a project, which consists of a list and the data is binded to the list using a local json model. We assume you know how to bind a control with json model, if not then see the tutorial on json binding


Anyways, moving on with the topic. We have a list here, here’s the output:


Here’s the code for the view:

<List id="list" headerText="Attachments" mode="Delete" delete="onDelete"
items="{
path: 'Model>/items' }">
<headerToolbar>
<Toolbar>
<Text id="header" class="sapUiSmallMargin" text="List of Products" />
</Toolbar>
</headerToolbar>
<items>
<CustomListItem>
<HBox>
<core:Icon size="2em" src="sap-icon://iphone"
class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" />
<VBox class="sapUiSmallMarginBeginEnd sapUiSmallMarginTopBottom">
<Link text="{Model>Title}" />
<Label text="{Model>Price}" />
</VBox>
</HBox>
</CustomListItem>
</items>
</List>

My json model, that I have used, i.e. Data.json
 
{
                "items": [{
                                "Title": "Lenevo",
                                "Price": "25000"
                }, {
                                "Title": "MI",
                                "Price": "8000"
                }, {
                                "Title": "Sony",
                                "Price": "30000"
                }, {
                                "Title": "Samsung",
                                "Price": "10000"
                }, {
                                "Title": "Karbon",
                                "Price": "5000"
                }, {
                                "Title": "Apple",
                                "Price": "50000"
                }]
}

Manifest.json

                "Model": {
                                      "type": "sap.ui.model.json.JSONModel",
                                       "uri": "model/Data.json"
                                 }

So, this is my default code in my project. Now coming to the point, now we have to do operations on the list.

1) Add a row to the list

To achieve this we will add a button to the header of the list. On the click of the button, we will add entries to the model and set the data to the model.

In the view we updated the header of the list

<headerToolbar>
<Toolbar>
<Text id="header" class="sapUiSmallMargin" text="List of Products" />
<ToolbarSpacer></ToolbarSpacer>
<Button text="Add Entries" press="OnAddClick" />
</Toolbar>
</headerToolbar>

And in the controller we added the code for, onAddClick event

OnAddClick: function(){

var oModel = this.getView().getModel("Model");
var oData = oModel.getData();
oData.items.unshift({
"Title": "Gionee",
"price" : "6000"
});
oModel.setData(oData);
}

Output
When Add Entries Button is clicked a new entry is added at the top of the list


2) Delete a List item

To achieve this, we will add an event on clicking on the delete button of each list item

In the view we will just add the code for onDelete
In controller we add the code for onDelete event

onDelete: function(oEvent){
this.getView().byId("list");
// calculating the index of the selected list item
var sPath = oEvent.mParameters.listItem.oBindingContexts.Model.sPath;
var iLength = sPath.length;
var iIndex = sPath.slice(iLength - 1);
// Removing the selected list item from the model based on the index
// calculated
var oModel = this.getView().getModel("Model");
var oData = oModel.oData;
var removed = oData.items.splice(iIndex, 1);
oModel.setData(oData);
}

When the delete icon is pressed, the top entry gets deleted.

General Working Output
SAPUI5 Hello World live demo

So this was basic functionality on list. In the next tutorial, I will explain you how to filter the list based on sap.m.Select control. Comment down your views regarding the tutorial, for further queries and additional tutorials to be made write down below.
Previous
Next Post »