Search code examples
sapui5selector

SAPUI5 text is not displayed in Selector


I read the documentation https://sapui5.hana.ondemand.com/#/entity/sap.m.Select/sample/sap.m.sample.Select/code and I wanted to created a selector in my code.

I carefully follow the documentation but the text isn't display. In my XML file:

<Select
        selectedKey="{test>/SelectedProduct}"
        items="{
           path: 'test>/ProductCollection',
           sorter: { path: 'Name' }
        }">
        <core:Item key="{test>/SelectedProduct/ProductId}" text="{test>/SelectedProduct/Name}" />
</Select>

in my controller file:

var oData = {
            "SelectedProduct": "HT-1001",
            "SelectedProduct2": "HT-1001",
            "SelectedProduct3": "HT-1001",
            "ProductCollection": [
                {
                    "ProductId": "HT-1000",
                    "Name": "Notebook Basic 15"
                },
                {
                    "ProductId": "HT-1001",
                    "Name": "Notebook Basic 17"
                },
                {
                    "ProductId": "HT-1002",
                    "Name": "Notebook Basic 18"
                },
                {
                    "ProductId": "HT-1002",
                    "Name": "Notebook Basic 18"
                },
                {
                    "ProductId": "HT-1002",
                    "Name": "Notebook Basic 18"
                }
            ],
            "Editable": true,
            "Enabled": true
        };
            var oModel = new JSONModel(oData);
            this.getView().setModel(oModel, "test");

It doesn't display me the text but it display me the number of elements of my array.

I also tried:

    <Select
        selectedKey="{test>/SelectedProduct}"
        items="{
           path: 'test>/ProductCollection',
           sorter: { path: 'Name' }
        }">
        <core:Item key="{test>/ProductCollection/ProductId}" text="{test>/ProductCollection/Name}" />
    </Select>

And:

<Select
    selectedKey="{test>/SelectedProduct}"
    items="{
       path: 'test>/ProductCollection',
       sorter: { path: 'Name' }
    }">
    <core:Item key="{test>/ProductCollection.ProductId}" text="{test>/ProductCollection.Name}" />
</Select>

Why this solution doesn't work as expected ?


Solution

  • No need for ProductCollection in Item binding path. The item path is already set to ProductCollection in Select.

    <core:Item key="{test>ProductId}" text="{test>Name}" />