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.

view.JPG

 

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.

selection.JPG

Now we can look at the output from the view:

table1.JPG

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.

table2.JPG

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Dhiraj More

    Hi

    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.

    main.View.xml:

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

      controllerName=”mobilexml2json.main” xmlns:html=”http://www.w3.org/1999/xhtml“>

      <Page title=”ComboBox Title”>

      <content>

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

      <columns>

      <Column>

      <Text text=”Choice” />

      </Column>

      <Column>

      <Text text = “Selected Item”></Text>

      </Column>

      </columns>

      <items>

      <ColumnListItem>

      <cells>

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

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

      </ComboBox>

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

      </cells>

      </ColumnListItem>

      </items>

      </table>

      </content>

      </Page>

    </core:View>

    Controller.js:

    onInit: function() {

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

    this.getView().setModel(this.model,”model1″);

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

    this.getView().setModel(this.model2,”model2″);

      },

      onSelect: function(evt){

      var context = evt.getsource().getBindingContext(“model1”);

      var path = context.getPath();

      var selecteditem = evt.getParameter(“selectedItem”);

      this.model.setProperty(path+”/name”,selectedItem.getText());

    }

    Could anyone please help me with it??

    (0) 
    1. Justin Ismond 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!

      (0) 
  2. Dhiraj More

    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}” />

      </ComboBox> 

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

    (0) 
    1. Justin Ismond Post author

      Dhiraj,

      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.

      (0) 

Leave a Reply