SAPUI5 – How to Bind to Individual Rows in a Table

[former_member210503]

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:

                    mock.json:

{

                  "table": [{

                         "name": "Test1",

                         "selectedKey": 2

            },

            {

                         "name": "Test2",

                         "selectedKey": 1

            }]

           }

mock2.json:

{

                  "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.

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.