My select element doesn't get populated with model data

Question

I'm writing a small OpenUI5 application. I would like to attach a model (list with key/text values) to a sap.m.Select element (drop-down box). However, regardless of whether I use static data for the model or fetch the data through ajax, the select element remains empty, no drop-down is displayed. I thought I had followed the examples/tutorials but I can't see what the problem is.

index.html:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Q Ui5 POC</title>
    <script id="sap-ui-bootstrap" src="resources/sap-ui-core.js"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-libs="sap.m"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-async="true"
      data-sap-ui-onInit="module:de/xx/qpoc/index"
      data-sap-ui-resourceroots='{ "de.xx.qpoc": "./" }'
    ></script>
  </head>
  <body id="content" class="sapUiBody"></body>
</html>

index.js:

sap.ui.define([
  "sap/ui/core/mvc/XMLView",
], function (XMLView) {
  "use strict";

  XMLView.create({
    id: "qpocMainView",
    viewName: "de.xx.qpoc.view.App",
  }).then(function(oView) {
    oView.placeAt("content");
  });
});

App.view.xml:

<mvc:View controllerName="de.xx.qpoc.controller.App"
  xmlns="sap.m"
  xmlns:layout="sap.ui.layout"
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true">
  <layout:VerticalLayout>
    <Select
      enabled="true"
      editable="false"
      forceSelection="false"
      items="{
        path: '/clientList',
        sorter: { path: 'text' }
      }">
      <core:Item key="{key}" text="{text}" />
    </Select>
  </layout:VerticalLayout>
</mvc:View>

App.controller.js:

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
], function (Controller, JSONModel) {
  "use strict";

  return Controller.extend("de.xx.qpoc.controller.App", {
    onInit: function() {
      var viewData = {
        "clientList": [
          { key: 'key1', text: 'text1'},
          { key: 'key2', text: 'text2'},
        ]
      };
      var oModel = new JSONModel(viewData);
      this.getView ().setModel(oModel);
    }
  });
});

I have removed all non-relevant UI elements and application logic. My understanding is that I do the binding in the onInit method of the controller. And that I can reference keys of the JSON structure I'm passing to the JSONModel constructor in the UI element (/clientList).

The generated UI looks like this:

Boghyon Hoffmann Boghyon Hoffmann · Accepted Answer · 2020-07-29T10:20:02

Remove those two lines in your XML view or set them to true (default value):

editable="false" → makes the control non-interactive
forceSelection="false" → none of the options will be selected preliminarily

You do have data bound. It's just the settings that prevented them from displaying.

My select element doesn't get populated with model data

1 Answers