CODEWITHSUNDEEP
javascriptsapui5
devtester
devtester

Reputation: 103

How to dinamically fill sap.m.Select with data?

I need to display some odata's data in a sap.m.Select but don't know why is not working, This is the code I have so far

    var oModel = new sap.ui.model.json.JSONModel();
    var data = [];
    var sUrlCard = "odata's url";
    var oDataModel = new sap.ui.model.odata.ODataModel(sUrlCard, true);

    oDataModel.read("CardBrandCollectionSet", {
        async: false,
        success: function(oData, response) {


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

            oModel.setData({
                'card': data
            });


            sap.ui.getCore().setModel(oModel, "card");
        },
        error: function(oError) {
            console.log(oError);

        }
    });

table where the select input is located

    var oTable = new sap.m.Table({
        mode: oMode,
        columns: [
            {
            hAlign: 'Center',
            header: new Text({
                text: "Card"
            })
            }
        ]
    });

Select input I need to fill with data

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

Upvotes: 1

Views: 812

Answers (2)

Saddamhussain
Saddamhussain

Reputation: 870

The binding path of the select control is wrong:

sap.ui.getCore().setModel(oModel, "card"); // model is set at core with name as card

$.each(oData.results, function(i, val) {
     data.push(val);
 });
  oModel.setData({
       'card': data // setting data in an object with name as card
  });


var oSelectMarca = new sap.m.Select({
        items: {
            path: "card>/card/", //Binding path model name along with array name
            template: new sap.ui.core.ListItem({
                key: '{card>Codcard}', // model name with property name
                text: '{card>Descript}' // model name with property name
            }),
            templateShareable: true
        },
        selectedKey: '{card>Marca}' // model name with property name
    });

Upvotes: 1

Erch
Erch

Reputation: 625

fist of all you do not want to create your odata model like that, please specify it in your manifest:

in "sap.app" part:

"dataSources": {
    "yourRemote": {
        "uri": "YOUR_URI",
        "type": "OData",
        "settings": {
            "odataVersion": "2.0"
        }
    }
}

in "sap.ui5" part:

"models": {
    "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
            "bundleName": "YOUR_i18n"
        }
    },
    "remoteModel": {
        "dataSource": "yourRemote"
    }
}

2nd you dont want to create controls in js, you do that in your xml files: https://sapui5.hana.ondemand.com/#/topic/1409791afe4747319a3b23a1e2fc7064
https://blogs.sap.com/2018/05/01/why-do-we-use-xml-views-rather-js-views-in-sapui5/

in that your select needs to be bound like that:

<Select
    id="anID"
    valueState="{vsModel>/otherText}"
    valueStateText="{i18n>someText}"
    forceSelection="false"
    items="{
        path: 'remoteModel>/CardBrandCollectionSet',
        sorter: {
            path: 'Descript'
        }
    }">
    <core:Item key="{remoteModel>Codcard}" text="{remoteModel>Descript}" />
</Select>

Upvotes: 0

Related Questions