how to bind sap.ui.core model into a select list?

Question

Need to put a json data like this

    {  
       "marcas":[  
          {  
             "__metadata":{  
                "id":"data id",
                "uri":"data url",
                "type":"data type"
             },
             "Codcard":"01",
             "Descript":"MasterCard"
          },
    ]
}

Into a select input like this one...

        var oSelectMarca = new sap.m.Select({
            items: {
                path: "marcas",
                template: new sap.ui.core.ListItem({
                    key: '{Kunnr}',
                    text: '{Descrip}'
                }),
                templateShareable: true
            },
            selectedKey: '{Marca}'
        });

I'm trying to do it saving this data into a model and then calling it as you can see above,

        var oModelListMarcasTarjeta = new sap.ui.model.json.JSONModel();
        var marcas = [{
                Descrip: "",
                Kunnr: ""
            }];
        var sUrlCard = "data url";
        var oDataModelCards = new sap.ui.model.odata.ODataModel(sUrlCard, true);

        oDataModelCards.read("dataCollection", {
            async: false,
            success: function(oData, response) {

                $.each(oData.results, function(i, val) {
                    marcas.push(val);
                });

                oModelListMarcasTarjeta.setData({
                    'cards': marcas
                });

                sap.ui.getCore().setModel(oModelListMarcasTarjeta, "marcas");

            }
        });

but is not working, any idea what is wrong?

If I set the model direct to the select input, of course works, but for some reason the input doesn't set te value of the selected item in the list.

score 0 · Answer 1 · answered Nov 13 '18 at 16:31

I could figured it out by setting the model direct into the input

    var oSelectMarca = new sap.m.Select({
        items: {
            path: "/cards",
            template: new sap.ui.core.ListItem({
                key: '{Kunnr}',
                text: '{Descrip}'
            }),
            templateShareable: true
        },
        selectedKey: '{Marca}'
    });
    oSelectMarca.setModel(oModelListMarcasTarjeta);

score 0 · Answer 2 · edited Nov 15 '18 at 10:48

0

The problem with above version is you are giving a name to the model marcas but you are not mentioning it while binding your control with this model.

When you do not provide any name to the model(like in the answer you have added) it picks the default model as you see while you set the model in the second case it works.

The same logic will work if you remove the model name like:

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

However, this is not at all appreciated to set the models on the core. Always set the models on the view or controls based on the requirement.

edited Nov 15 '18 at 10:48

Inizio

2,226
15
18

answered Nov 13 '18 at 17:28

Nandan Chaturvedi

1,028
3
16
32

I just edited the post so you can see it better, even if I use the name of the model I declared in the core, It doesn't display any data. Don't know why if json is comming ok – devtester Nov 13 '18 at 19:28
did you try by not naming the model you are setting? – Nandan Chaturvedi Nov 14 '18 at 08:39

Inizio · Answer 3 · 2018-11-15T12:54:28.817

As your have the model name, you need to use it in the binding path as well

Let say you have the following JSON data from backend.

JSON Data

{
  'cards': [{
    'Descrip': "",
    'Kunnr': ""
  }, {
    'Descrip': "ss",
    'Kunnr': "asf"
  }, {
    'Descrip': "fff",
    'Kunnr': "asdf"
  }, {
    'Descrip': "fas",
    'Kunnr': "asdf"
  }, {
    'Descrip': "asdfa",
    'Kunnr': "asdfwer"
  }]
}

Binding

var oModelListMarcasTarjeta = new sap.ui.model.json.JSONModel();
oModelListMarcasTarjeta.setData({ //for implementation I am setting the data like this
  'cards': [{
    'Descrip': "",
    'Kunnr': ""
  }, {
    'Descrip': "ss",
    'Kunnr': "asf"
  }, {
    'Descrip': "fff",
    'Kunnr': "asdf"
  }, {
    'Descrip': "fas",
    'Kunnr': "asdf"
  }, {
    'Descrip': "asdfa",
    'Kunnr': "asdfwer"
  }]
});
sap.ui.getCore().setModel(oModelListMarcasTarjeta, "marcas");

//Use Model name for binding 
var oSelectMarca = new sap.m.Select({
  items: {
    path: "marcas>/cards",
    template: new sap.ui.core.ListItem({
      key: '{marcas>Kunnr}',
      text: '{marcas>Descrip}'
    })
  }
});

how to bind sap.ui.core model into a select list?

3 Answers3

Linked