CODEWITHSUNDEEP
sapui5
Tom Rottiers
Tom Rottiers

Reputation: 19

SAP UI5: error in binding

Even though quite experienced in SAP HCM development, I have just started my quest to learn UI5 (using eclipse) so my apologies in advance if my question is a bit basic...

I am trying to create a binding of data (based upon the example of UI5 rockstar DJ Adams) but for some reason, have no result.

  1. in my controller I have entered the following code (in the onInit function) to create the data and make them available:

    onInit: function() {
var cities = [ { id: "A1", name: "Kobe" },
           { id: "A2", name: "Hiroshoma" }
];
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(cities);

        sap.ui.getCore().setModel(oModel);



},

  2. in my view, I try to bind the data using the following code: 

                            </IconTabFilter>
                        <IconTabFilter
                            binding="{/cities/0}"
                            text="{name}"
                            icon="sap-icon://group"
                            design="Horizontal">

                        </IconTabFilter>
                        <IconTabFilter
                            binding="{/cities/1}"
                            text="{name} ({id})"
                            icon="sap-icon://group"
                            design="Horizontal">

                        </IconTabFilter>

                    </items>
                </IconTabBar>
</content>
</Page>
</core:View>

  3. in my output,all the elements display correctly, however I don't get the values that I initialised in my model. However I don't get any errors either

My questions: 1. can you provide some assistance/guidance to see where I made an error? 2. what would be the easiest way to detect where issues are when it comes to databinding (debugger, other tips)?

Many thanks for your guidance,

Tom

Upvotes: 1

Views: 3245

Answers (3)

Qualiture
Qualiture

Reputation: 4920

The error is indeed in your bindings. Although you have a variable cities, your JSON context starts with id. You could update your JSONModel to have root element cities:

.setModel({
  cities: [
    { id: "A1", name: "Kobe" },
    { id: "A2", name: "Hiroshoma" }
  ]
});

As for debugging, I prefer the standard Google Chrome browser tools. It allows for watches, breakpoints, and (small) live code changes.

Upvotes: 2

Gippy Aulakh
Gippy Aulakh

Reputation: 102

Your approach of creating model is not quiet right. Variable cities is not object but an array. Either you can set data to model:

onInit: function() {
var cities ={ "cities": [{ "id": "A1", "name": "Kobe" },
                     { "id": "A2", "name": "Hiroshoma" }
                     ]}
    var oModel = new sap.ui.model.json.JSONModel();

    oModel.setData(cities);

    sap.ui.getCore().setModel(oModel);

},

or you can set property:

var cities = [ { id: "A1", name: "Kobe" },
       { id: "A2", name: "Hiroshoma" }
];
    var oModel = new sap.ui.model.json.JSONModel();

    oModel.setProperty("/cities", cities);

    sap.ui.getCore().setModel(oModel);

and you also have to bind your xml correctly. You can follow the template of list items from SapUi5 explored or developers guide

Upvotes: 0

Ank
Ank

Reputation: 402

Please try to use template, instead of binding individual elements you can use the template to bind the array to individual elements. Example:

<List
items="{/ProductCollection}"
headerText="Products">
<items>
  <ObjectListItem
    title="{Name}"
    type="Active"
    press="onListItemPress"
    number="{Price}"
    numberUnit="{CurrencyCode}">
    <firstStatus>
      <ObjectStatus
        text="Overweight"
        state="Error" />
    </firstStatus>
    <secondStatus>
      <ObjectStatus
        text="In Stock"
        state="Success" />
    </secondStatus>
    <attributes>
      <ObjectAttribute text="{WeightMeasure} {WeightUnit}" />
      <ObjectAttribute text="{Width} x {Depth} x {Height} {DimUnit}" />
    </attributes>
  </ObjectListItem>
</items>

[Live example: https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.ObjectListItem/code]

If you want to have finer control on the data then you can set multiple model with key value pair.

Example:

sap.ui.getCore().setModel("key",oModel);

and to get the value:

sap.ui.getCore().getModel("key");

Upvotes: 0

Related Questions