CODEWITHSUNDEEP
javascriptxmldata-bindingcomboboxsapui5
sonja
sonja

Reputation: 934

SAPui5 create simple sap.m.ComboBox

I have a simple model that I want to bind to a sap.m.ComboBox. The data look like this:

(2) ["Tabelle1", "Tabelle2"]
0: "Tabelle1"
1: "Tabelle2"

What I do is this:

... some unimportant stuff before...    
var sheets = new sap.ui.model.json.JSONModel(sheetNames);
var comboBox = that.getView().byId("selectSheet");
comboBox.setModel(sheets);
var oItemTemplate = new sap.ui.core.Item();
comboBox.bindItems("/sheets", oItemTemplate)

the comboBox gets created in my XML view:

<m:ComboBox id="selectSheet" items="{path: '/sheets'}" change="onSheetSelected">
    <core:Item />
</m:ComboBox>

After setting the Model or binding the Items nothing happens.. I feel like that's some simple coding that I'm doing wrong here. Please advise me how to do this. The ComboBox should end up with two simple choices "Tabelle1" and "Tabelle2".

Update with suggested solution

var sheetNames =  JSON.parse(JSON.stringify(wb.SheetNames));
var mappedNames = _.map(sheetNames, name => { return {Name: name}});
var sheets = new sap.ui.model.json.JSONModel(mappedNames);
var comboBox = that.getView().byId("selectSheet");
var oItemTemplate = new sap.ui.core.Item({
     text : '{Name}'
    });
comboBox.setModel(sheets);
comboBox.bindItems("/mappedNames", oItemTemplate)

Mapped names now looks like this:

(2) 0: {Name: "Tabelle1"} 1: {Name: "Tabelle2"} length: 2

Upvotes: 1

Views: 10410

Answers (1)

Khaos
Khaos

Reputation: 164

You must provide a template that specifies what an item should look like in the ComboBox

Create Binding in Javascript:

Contoller:

var sheetNames = {myList : [{ Name : "Tabelle1"}, {Name : "Tabelle2"}]};
var sheets = new sap.ui.model.json.JSONModel(sheetNames);
var comboBox = that.getView().byId("selectSheet");
var oItemTemplate = new sap.ui.core.Item({

    text : '{Name}' // here goes your binding for the property "Name" of your item
});

comboBox.setModel(sheets);
comboBox.bindItems("/myList", oItemTemplate);

View:

Create Binding in XML:

controller: 

var sheetNames = {myList : [{ Name : "Tabelle1"}, {Name : "Tabelle2"}]};
var sheets = new sap.ui.model.json.JSONModel(sheetNames);
var comboBox = that.getView().byId("selectSheet");

comboBox.setModel(sheets);

view: 

<m:ComboBox id="selectSheet" items="{path: '/myList'}">
    <core:Item text="{Name}"/> </m:ComboBox>

Upvotes: 1

Related Questions