issue in oData read Binding to sap.m.Select

Question

i have the next issue:

i'm trying to bind an oData response to a sap.m.Select in a XML view, but i didn't have a success bind.

i have two Select options in the view, one is binded directly from backend, but when i select one from the first select i need to make a oData Read to another service for show the detail of the value selected in the first Select.

the code what i have looks like this:

            <f:FormElement id="label17" label="Parte Objeto">
                                <f:fields>
                                    <Select enabled="true" id="objeto_grupo"
                                        items="{path: '/CatalogosComboSet', filters : [ { path : 'IKatalogart', operator : 'EQ', value1 : 'B'}, { path : 'IStep', operator : 'EQ', value1 : '1'} ] }"
                                        name="" placeholder="Tecnico ejecutor" selectedKey="{Codegruppe}" change="detalleSelect">
                                        <items>
                                            <core:ListItem id="__item_objeto_1" key="{Codegruppe}" text="{Kurztext}"/>
                                        </items>
                                    </Select>
                                    <Select enabled="true" id="objeto_detalle" name="" placeholder="Objeto" selectedKey="0">
                                        <items>
                                        </items>
                                    </Select>
                                </f:fields>
                            </f:FormElement>

in the controller.js i have this:

    detalleSelect: function(oEvent) {
        var id = oEvent.getSource();
        var catalogo, codGrupo;
        switch (id.getId()) {
            case "__xmlview0--objeto_grupo":
                catalogo = "B";
                var codGrupo = this.getView().byId("objeto_grupo").getSelectedKey();
                break;
            case "__xmlview0--sintoma_grupo":
                catalogo = "C";
                var codGrupo = this.getView().byId("sintoma_grupo").getSelectedKey();
                break;
            case "__xmlview0--causa_grupo":
                catalogo = "5";
                var codGrupo = this.getView().byId("causa_grupo").getSelectedKey();
                break;
            default:

        }
        this.selectOdataFill(catalogo, codGrupo);
    },

    selectOdataFill: function(catalogo, codGrupo) {

        var comboDetalle;

        switch (catalogo) {
            case "B":
                comboDetalle = "objeto_detalle";
                break;
            case "C":
                comboDetalle = "sintoma_detalle";
                break;
            case "5":
                comboDetalle = "causa_detalle";
                break;
            default:
        }

        console.log(comboDetalle);

        var step = 2;
        var afilters = new Array();
        var filterByName = new sap.ui.model.Filter("IKatalogart", sap.ui.model.FilterOperator.EQ, catalogo);
        afilters.push(filterByName);
        var filterByName = new sap.ui.model.Filter("IStep", sap.ui.model.FilterOperator.EQ, step);
        afilters.push(filterByName);
        var filterByName = new sap.ui.model.Filter("ICodegruppe", sap.ui.model.FilterOperator.EQ, codGrupo);
        afilters.push(filterByName);

        var oListBox = this.byId(comboDetalle);
        var sServiceUrl = "/sap/opu/odata/sap/ZPMGW_ORDENPMRFC_SRV_02/";
        var oConfig = {
            metadataUrlParams: {},
            json: true,
            defaultBindingMode: "OneWay",
            defaultCountMode: "Inline",
            useBatch: true // defaultOperationMode: "Auto"
        };

        var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl, oConfig);
        oModel.read("/CatalogosComboDetalleSet", {
            filters: afilters,
            success: function(oData, response) {
                var oItem = new sap.ui.core.ListItem({
                    key: "{Codegruppe}",
                    text: "{Kurztext}"
                });
                var oJSModel = new sap.ui.model.json.JSONModel(oData);

                console.log(oJSModel);
                oListBox.setModel(oJSModel, "myModel");
                console.log(oListBox.getModel());

                oListBox.bindAggregation("items", {
                    path: "{/oData>results}",
                    template: oItem
                });
            },
            error: function(oError) {}
        });

the response is OK, i have the data, but the template doesn't work, i don't know what i'm doing wrong, if anyone knows, i'll be really grateful.

Answer 1

The answer below assumes that you have only one oData service with two different Entity Sets.

In this case you would like to bind a different entity set in each sap.m.Select control.

I am also assuming that there is some kind of relation between both entity sets, which can be achieved using a navigation property in your gateway service.

https://github.com/fabiopagoti/so-q48965163

Most important parts:

View

<f:SimpleForm layout="ResponsiveGridLayout" title="StackOverflow - Question 48965163" >
    <f:content>
        <Label text="Category"/>
        <Select items="{/Categories}" change="onChangeCategory">
            <items>
                <core:Item text="{Name}" key="{Id}"></core:Item>
            </items>
        </Select>
        <Label text="SubCategory"/>
        <Select id="subcategory-select" items="{ToSubCategories}">
            <items>
                <core:Item text="{Name}" key="{Id}"></core:Item>
            </items>
        </Select>
    </f:content>
</f:SimpleForm>

Controller

onInit: function(){
    this._subcategorySelect = this.byId("subcategory-select");
},

onChangeCategory: function(oEvent){
    var oSelectedItem = oEvent.getParameters().selectedItem;
    var oContext = oSelectedItem.getBindingContext();
    // var oCategory = oContext.getObject();

    this._subcategorySelect.bindElement(oContext.getPath());
}

In case you really have two different services, you will need two OData models in your application.

You can force the second sap.m.Select control to use a different service by using the setModel function call on it.

Then, you would have to adjust the binding in the second Select using the bindAggregation method inside its "items" property.