Skip to Content
Author's profile photo Justin Ismond

SAPUI5 – How to Bind to Individual Rows in a Table

This example will show how to add a combobox inside of a table, and be able to set the binding to each row for individual selections. This is useful if you need to separate the rows to provide different information or selections to the user. The concept is using the key values with the selected item from the combobox to see this work. We will be using 2 models for this example, both json files.  Here is the data from the json files for you to use here:



                  “table”: [{

                         “name”: “Test1”,

                         “selectedKey”: 2



                         “name”: “Test2”,

                         “selectedKey”: 1





                  “items”: [{

                         “name”: “Product 1”,

                         “key”: 1



                         “name”: “Product 2”,

                         “key”: 2



The first step is to create your project. We will be using eclipse for now – just create a new SAPUI5 application and give it a name. Go ahead and have it make a default view, just make a page element and insert your table into the tags. We will go add the binding now for the table and the combobox. The Table uses “{model1>table}” for the items and the combobox uses “{model2>items}” for the binding. Be careful to set the selectedKey to use “{model1>selectedKey}” for the combobox for it to work correctly.



Once the view is setup let us go into the controller for the view and add an onInit function.  I only set the models here – you can use either a json file or go ahead and hard code the data right there if you need. Set both models and give them the designations, “model1” and “model2” for this example.

set models.JPG

Last for the controller, let us create a function that will fire when the combobox is used. I call it “onSelect” for this example. What we do here is get the binding context of the Event, then the path and parameter of the selected item which is then used to get the text from /name to set as a property.


Now we can look at the output from the view:


As you can see, it gives the “test” items as a place holder before the combobox is selected. Once you choose a selection from the combobox – it will cause the value of “selected Item” to change and match your selection.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member


      I am new to SAPUI5. I tried the below example but not getting the output.

      One more question the above example is a mobile or Desktop application?

      Please find my code below.

      Index.html: No change in Index.html as it is when created mobile application.


      <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

        controllerName="mobilexml2json.main" xmlns:html="">

        <Page title="ComboBox Title">


        <table id ="idTable" items="{model1>/table}">



        <Text text="Choice" />



        <Text text = "Selected Item"></Text>






        <ComboBox items="{model2>/items}" selectionChange="onselect" selectedKey ="{model1>/selectedKey}">

        <core:Items key ="{model2>/key}" text="{model2>/name}" />


        <Text text ="{model2>/name}" />









      onInit: function() {

      this.model = new sap.ui.model.json.JSONModel("mock.json");


      this.model2 = new sap.ui.model.json.JSONModel("mock2.json");



        onSelect: function(evt){

        var context = evt.getsource().getBindingContext("model1");

        var path = context.getPath();

        var selecteditem = evt.getParameter("selectedItem");



      Could anyone please help me with it??

      Author's profile photo Justin Ismond
      Justin Ismond
      Blog Post Author

      Hello Dhiraj,

      I had a look at your code and one thing I noticed is the <Table> tags in your view do not begin with a capital 'T' - try to change this and see if it works. Another thing I noticed is the name of the controller, which you set as "mobilexml2json.main". Just make sure that is the same name you use in the controller.js file. Last also try to use chrome dev tools (F12 key in chrome browser) and check the console for errors.  Hope that helps!

      Author's profile photo Former Member
      Former Member

      Thanks for your help but not working....Any simple example you have will also work.

      Author's profile photo Justin Ismond
      Justin Ismond
      Blog Post Author


      Sure - here is a working example in JSBin, please note this version runs the XML view from the index.html file, instead of how you would build it in eclipse. I removed the page tags in the view to simplify it. Here is the link: JS Bin - Collaborative JavaScript Debugging

      Author's profile photo Former Member
      Former Member

      Thanks for you expertise. its working now...some typo mistakes were there...

      <ComboBox items="{model2>/items}" selectionChange="onSelect" selectedKey ="{model1>selectedKey}">

        <core:Item key ="{model2>key}" text="{model2>name}" />


      Can you please explain the above code in detail. Can the same example is possible with JS view?

      At last for your support and guidence..

      Author's profile photo Justin Ismond
      Justin Ismond
      Blog Post Author


      I can give a brief explanation, although I don't usually write my views in JS. To answer your question, yes you can create the same content in a JS view. If you refer to the documentation it explains how to create a comboBox with javascript here:

      JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.ComboBox

      The method summary indicates you can set the same values for selectedKey and so on using JS. I prefer to write my views in XML because it keeps the code logic separate from the layout. 

      The simple explanation is the ComboBox tag creates a constructor for the element, which takes the binding from 'model2>/items', then sets an event to fire when a selection is made called 'onSelect' and then states the selectedKey value. Next the core:Item tag sets a key for the item which will match and set the text for 'model2>name'. You will find the additional methods for these documented here: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.ComboBoxBase which includes the ComboBox as a subclass.

      I hope this information is helpful.

      Author's profile photo Former Member
      Former Member

      Hey Thanks for the explanation it is all clear now.

      Thanks for your expertise....

      Author's profile photo Kiran VK
      Kiran VK

      Hi Buddy,

      First, very thank you for this Blog. Because you spent your time for our sake.

      Could you please help me on below question I posted in our community.

      Your inputs are very precious to me. Thank you.