How to get Selected table index value?



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.

Previous
Next Post »

1 comments:

Click here for comments
Kunal Singha
admin
12 May 2017 at 08:33 ×

Hi 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!

Congrats bro Kunal Singha you got PERTAMAX...! hehehehe...
Reply
avatar