data-bindingsapui5jsonmodel

SAPUI5 List binding with filtered data in XML view


I hope you are doing well

Currently i'm trying to bind a filtered data to a list control in xml view in the oninit event of the controller the odata service url is like this

http://mikmo.mylocalhost.com/MIKMOWCFDataService.svc/view_VendorGroup?$filter=VendorID%20eq%201

i used the code below

var sListURI = "http://mikmo.mylocalhost.com/MIKMOWCFDataService.svc";
        var oListModel = new sap.ui.model.odata.ODataModel(sListURI, false);
        var oListModelJson = new sap.ui.model.json.JSONModel();
        oListModel.oHeaders = {
            "DataServiceVersion": "2.0",
            "MaxDataServiceVersion": "2.0"
        };
        oListModel.read("/view_VendorGroup", null, ["$filter=VendorID eq " + window.VendorID], null, function(oData, oResponse) {
            oListModelJson.setData(oData);
            oListModelJson.loadData(oData);

        }, null);

        //oListModelJson.bindList(sPath, [oContext], [aSorters], [aFilters], [mParameters])
        oListModelJson.attachRequestCompleted(function(oData, oEvent) {

        });
        myList.setModel(oListModelJson, "VendorGroups");

and in the XML view

<List growing="true" growingThreshold="100" headerText="{i18n&gt;businessareas}" id="lstVendorGroups">
                            <items>
                                <!--<ObjectListItem title="{VendorGroups>GroupName}" type="Active" press=".onItemSelected" />  -->
                                <StandardListItem id="stListItem" />
                            </items>
                        </List>

What i need to know is how to bind the list items in the attachRequestCompleted method with the data Thanks in advance


Solution

  • You need to bind the aggregation 'items' of the sap.m.List. I would modify the following things in your code:

    1. Read method of oDataModel: Once you do a read operation using oDataModel, you get the success handler where you are setting the data in your local JSON Model. The code line :oListModelJson.loadData(oData); is not required as the previous line of code is : oListModelJson.setData(oData); - is already setting the data to your local JSON Model.

    2. AttachRequestCompleted of JSON Model: I would not use this method as it is used when you are loading data ( via AJAX call) directly to JSON Model. But here as you are using oData Model to fetch, is it not required. So I will delete the handler.

    3. In Your XML views, you need to tell sap.m.List, the path of where your array of Objects is present. Considering that you have applied filters, your JSON model will contain data starting with 'results' keyword. Please paste your JSON Model data if below code doesn't help:

    Code in XML:

    <List growing="true" growingThreshold="100" headerText="{i18n&gt;businessareas}" id="lstVendorGroups" items="{VendorGroups>/results}">
                                <items>
                                    <!--<ObjectListItem title="{VendorGroups>GroupName}" type="Active" press=".onItemSelected" />  -->
                                    <StandardListItem id="stListItem" />
                                </items>
                            </List>
    

    Code in Controller after my modifications:

    var sListURI = "http://mikmo.mylocalhost.com/MIKMOWCFDataService.svc";
            var oListModel = new sap.ui.model.odata.ODataModel(sListURI, false);
            var oListModelJson = new sap.ui.model.json.JSONModel();
            oListModel.oHeaders = {
                "DataServiceVersion": "2.0",
                "MaxDataServiceVersion": "2.0"
            };
            oListModel.read("/view_VendorGroup", null, ["$filter=VendorID eq " + window.VendorID], null, function(oData, oResponse) {
                oListModelJson.setData(oData);
               // oListModelJson.loadData(oData);
    
            }, null);
    
            //oListModelJson.bindList(sPath, [oContext], [aSorters], [aFilters], [mParameters])
            //oListModelJson.attachRequestCompleted(function(oData, oEvent) {
            //
            //});
            this.byId('lstVendorGroups').setModel(oListModelJson, "VendorGroups");