How to bind a model json to a comboBox in controller?

Question

I want to bind a model json with a comboBox inside the controller (not in a xml view). I made a model Json called types.json and I passed to the controller, but, when I bind the values inside the created model to the combobox, didn't show nothing.

Can you please help me. I can't find the problem here.

That is parts of my code, below, who I think is important to this question.

my MODEL JSON - name: types.json

  "types": [
      {
          "text": "Férias",
          "key": "01"
      },
     {
          "text": "something",
          "key": "02"
      },
  ]

my CONTROLLER - name: Page.controller.js

handleAppointmentCreate: function (oEvent) { var oStartDate = oEvent.getParameter("startDate"), oEndDate = oEvent.getParameter("endDate"), oCalendarRow = oEvent.getParameter("calendarRow"), oEmpId = oCalendarRow.getKey(),

                  _oYearStartDate = oStartDate.getFullYear(),
                  _oMonthStartDate = oStartDate.getMonth() + 1,
                  _oDateStartDate = oStartDate.getDate(),

                  _oYearEndDate = oEndDate.getFullYear(),
                  _oMonthEndDate = oEndDate.getMonth() + 1,
                  _oDateEndDate = oEndDate.getDate(),

                  _HourStart = oStartDate.getHours(),
                  _oMinStart = oStartDate.getMinutes(),
                  _oSecStart = oStartDate.getSeconds(),

                  _oHourEnd = oEndDate.getHours(),
                  _oMinEnd = oEndDate.getMinutes(),
                  _oSecEnd = oEndDate.getSeconds(),


                  sStartDate = _oYearStartDate + "-" + _oMonthStartDate + "-" + _oDateStartDate,
                  sEndDate = _oYearEndDate + "-" + _oMonthEndDate + "-" + _oDateEndDate,
                  sStartHour = _HourStart + ":" + _oMinStart + ":" + _oSecStart,
                  sEndHour = _oHourEnd + ":" + _oMinEnd + ":" + _oSecEnd,
                  sIdEmp = oEmpId;

                  var dataModel = this.getOwnerComponent().getModel("Model"); 
                  this.getView().setModel(dataModel, "DataModel"); 

              if (!this.oConfirmDialog) {
                  this.oConfirmDialog = new Dialog({
                      type: DialogType.Message,
                      title: "Novo agendamento",
                      content: [
                          new HorizontalLayout({
                              content: [
                                  new VerticalLayout({
                                      width: "120px",
                                      content: [
                                          new Text({ text: "Id de funcionário: " }),
                                          new Text({ text: "Data de inicio: " }),
                                          new Text({ text: "Data de término: " }),
                                          new Text({ text: "Hora de inicio: " }),
                                          new Text({ text: "Hora de término: " })
                                      ]
                                  }),
                                  new VerticalLayout({
                                      content: [
                                          new Text({text: sIdEmp }),
                                          new Text({ text: sStartDate }),
                                          new Text({ text: sEndDate }),
                                          new Text({ text: sStartHour }),
                                          new Text({ text: sEndHour })
                                      ]
                                  })
                              ]
                          }),
                          new TextArea("confirmationTitle", {
                              width: "100%",
                              placeholder: "Adicione o titulo do agendamento"
                              //required:"true" - não pode ter
                          }),
                          new TextArea("confirmationDetails", {
                              width: "100%",
                              placeholder: "Adicione detalhes do agendamento"
                              //required:"true" - não pode ter
                          }),

                          new sap.m.ComboBox({
                              items: {
                                  path: "DataModel>/types",   
                                  template: {
                                      Type: "sap.ui.core.ListItem",
                                      text: "{DataModel>Key}",
                                      enabled: true
                                  }
                              }
                          })
                      ],

                      beginButton: new Button({
                          type: ButtonType.Emphasized,
                          text: "Submeter",
                          press: function () {
                              var sIdEmp1 = sIdEmp,
                                  sStartDate1 = sStartDate,
                                  sEndDate1 = sEndDate,
                                  sStartHour1 = sStartHour,
                                  sEndHour1 = sEndHour,
                                  sTitle = Core.byId("confirmationTitle").getValue(),
                                  sDetails = Core.byId("confirmationDetails").getValue();

                              this.addAppointment(sIdEmp1, sStartDate1, sEndDate1, sStartHour1, sEndHour1, sTitle, sDetails);
                              this.oConfirmDialog.close();
                          }.bind(this)
                      }),
                      endButton: new Button({
                          text: "Cancelar",
                          press: function () {
                              this.oConfirmDialog.close();
                          }.bind(this)
                      })
                  });
              }
              this.oConfirmDialog.open();

          },

Are you able to show some/any code or any logs/errors so we can understand the situation better? — singh.rbir

Albert Albert · Accepted Answer · 2020-12-14T15:12:47

First of all, there's a typo. In your model you have the string "key", but when creating the ComboBox you used "Key", with an uppercase K. Be sure that you put the same on both places.

If this don't solves your problem, try using sap.ui.core.Item instead of sap.ui.core.ListItem, as it is the control that the aggregation items accepts:

new sap.m.ComboBox({
    items: {
        path: "DataModel>/types",
        template: new sap.ui.core.Item({
            key: "{DataModel>key}",
            text: "{DataModel>text}"
        })
    },
    enabled: true
})

Also, remember that ComboBox is ony recomended when you will have between 13 and 200 results. For less than 13 options to show use sap.m.Select instead.

How to bind a model json to a comboBox in controller?

1 Answers