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
Video on json binding: https://www.youtube.com/watch?v=dWh6r4LVVjM
Blog on json binding: http://www.sapui5tutors.com/2016/01/data-binding.html
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
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.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon