componentssapui5sap-web-ide

Select data binding in SAPU15


I read the documentation https://sapui5.hana.ondemand.com/#/api/sap.m.Select and tried to do a small example. I created my value in my function onInit of my controller:

var oData = {
        "SelectedProduct": "test1",
        "ProductCollection": [
                {
                    "ProductId": "test1",
                    "Name": "test 1"
                },
                {
                    "ProductId": "test2",
                    "Name": "test 2"
                },
                {
                    "ProductId": "test3",
                    "Name": "test 3"
                }
            ]
        };
var oModel = new JSONModel(oData);
this.getView().setModel(oModel, "myTest");

I want that my selectedProduct default value is test1 so I init it to test1.

In my xml file, i created my selector as following:

<Select
    id="idSelect"
    forceSelection="false"
    selectedKey="{myTest>/SelectedProduct}"
    change="_change"
    items="{
        path: 'myTest>/ProductCollection'
    }">
    <core:Item key="{myTest>/SelectedProduct}" text="{myTest>Name}" />
</Select>

So, everytime i change the value, my following code is made:

_change: function () {
        console.log("_changeAblauf");
        console.log(this.getView().byId("idAblaufbriefeSelect").getSelectedItem());
        console.log(this.getView().byId("idAblaufbriefeSelect").getName());
        },

My issue is that the print always display the content of my SelectedProduct from oData and not from the selector..

Why it don't take the value from the selector and how can i read my new value of the selector ?


Solution

  • In the key property of the Item you should bind myTest>ProductId: this value will populate your model SelectedProduct property every time the change event will be fired.