In this particular blog, I will show how to get the index of the
selected row. For this I will create a sample application named Live_Img, which
I have already created.
I will show you initially how to define a table and then how
to bind data within the table. Once the table is populated, then I will show
how to get the index of the selected row item from the table.
Let’s then start with the project. First create a project
named Live_Img(this is in my case). Here’s my output screen.
Maintain the code in index.html file and component.js file.
I hope you know how to maintain these files, if not then see the documentation
on project structuring from sapui5tutors blog. Now, I will mention the routing
part in the manifest.json file.
Routing in manifest.json
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.live_img.view",
"targetAggregation": "pages"
},
"routes": [{
"pattern": "",
"name": "info1",
"view": "info1",
"targetAggregation": "pages",
"controlId": "id1"
}]
}
Now, maintain the code in info1.view.xml. In this file I
have used the sap.m.Table control. And used json model for binding the data in
table.
Info1.view.xml
<Table items="{json>/Content1}"
id="tab1" visible="true"
inset="true" >
<columns>
<Column >
<Text text="Product
_ID"></Text>
</Column>
<Column>
<Text text="Product_Name"></Text>
</Column>
<Column>
<Text text="Product_Price"></Text>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation"
press="onClick">
<cells>
<ObjectNumber number="{json>Num1}"></ObjectNumber>
<Text text="{json>Product1}"/>
<ObjectNumber number="{json>Price1}"/>
</cells>
</ColumnListItem>
</items>
</Table>
Here my model name is “json”. I have mentioned it in the
component.js file, within the init function.
var a =new
sap.ui.model.json.JSONModel();
a.loadData("model/model.json");
this.setModel(a,"json");
I have maintained the json data in “model.json” file. Here
is the data:
{
"Content1": [{
"Num1": "1000",
"Product1": "Lenovo",
"Price1": "20K"
}, {
"Num1": "1001",
"Product1": "MI",
"Price1": "25K"
}]}
Now, the main part; to define the press event on the click
of table rows and to extract the index of the row item clicked. This is the
code maintained in the press event.
onClick: function(oEvt){
var
item = oEvt.oSource.oBindingContexts.json.sPath;
var
index = item.split('/')[2];
sap.m.MessageToast.show("Item
Index = "+index);
}
The index here gives the position of the particular row item
from the array, and therefore the position starts from 0. Hence the 1st item in
the table has an index value of 0, similarly, 2nd would have a
position of 1.
Here is the output:
Stay tuned for more blogs on SAPUI5. Comment down for any queries or mail me at sapui5tutors@gmail.com.
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.
1 comments:
Click here for commentsHi Sanjo,
Need your help to capture data from table UI element.
I have developed table UI using XML view in WEBIDE and populated data using backend OData ABAP service.
Now upon user selection on particular row I need to capture the selected row data.
Waiting for your valuable input. Thanks in advance!
ConversionConversion EmoticonEmoticon