Search code examples
odatasapui5

SAP Ui OData v2 setBindingContext doesn't show data

I'm setting up a table that has a detail view when an Item is clicked. The way I want to implement that is the following:

Table Controller That's the logic to show all my table entries which is loaded from the oData interface.

onInit: function() {
    var serviceUrl = "/sap/opu/odata/sap/ZSS18_T4_UNIVERSITY_SRV";
    var oModel = new sap.ui.model.odata.v2.ODataModel(serviceUrl);
    this.getView().setModel(oModel);

},

handleLineItemPress : function(evt){
    // Create App object
    var app = new sap.m.App({
        initialPage : this.createId("idDetail1")
    }); 

    // create detail page
    var page = sap.ui.view({
        id : this.createId("idDetail1"),
        viewName: "zss18_t4.projectDetail",
        type : sap.ui.core.mvc.ViewType.XML
    }); 

    // Pass Data to detail page
    var context = evt.getSource().getBindingContext(); 
    console.log(context); 
    app.to(page, { ctx : context});


    // Show detail page in app
    app.addPage(page); 
    app.placeAt("content", "only"); 



        }

Detail page Now I would like to display a single item's details on a new page, whose controller is here: 

        onInit: function() {
        var serviceUrl = "/sap/opu/odata/sap/ZSS18_T4_UNIVERSITY_SRV";
        var oModel = new sap.ui.model.odata.v2.ODataModel(serviceUrl);
        var view = this.getView();
        this.getView().setModel(oModel);
        this.getView().addDelegate({
            onBeforeShow : function(evt) {
                view.setBindingContext(evt.data.ctx);

            }

        });
    },

And this is the corresponding view: 

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
    controllerName="zss18_t4.projectDetail" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form">
<Page title="Details">
<VBox class="sapUiSmallMargin">
            <f:SimpleForm id="projectDetails" title="Project Details">
            <f:content>
                    <Label text="Project ID" />
                    <Text text="{projid}" />
                    <Label text="Title" />
                    <Text text="{title}" />
                    <Label text="Description" />
                    <Text text="{description}" />
                    <Label text="Type" />
                    <Text text="{type}" />
                    <Label text="Supervisor" />
                    <Text text="{supervisor}" />
                    <Label text="Lead" />
                    <Text text="{lead}" />
                    <Label text="Members" />
                    <Text text="{members}" />
                    <Label text="Status" />
                    <Text text="{status}" />
                    <Label text="Startdate" />
                    <Text text="{startdate}" />
                    <Label text="Enddate" />
                    <Text text="{enddate}" />
                    </f:content>
            </f:SimpleForm>
        </VBox>
</Page>

What I'm seeing is this: enter image description here

I've read the similar posts but didn't find the right solution just yet. Thanks in advance for helping me out!

Solution

  • I did a double check on how the oData Service works and stumbled upon the following blogpost (unfortunately in German): http://fiori.acando-live.de/2018/04/03/odata-model-wie-kommen-die-daten-in-meine-anwendung/ It said that in some cases you have to do a proper oModel.read() to load the acutal data to the frontend, which was missing here. I added a oModel.read() to retrieve the actual dataset from the backend. The context was correct, but there was no data available.

    Here is my implementation for the projects controller, which displays the data correctly:

    onInit: function() {
    var serviceUrl = "/sap/opu/odata/sap/ZSS18_T4_UNIVERSITY_SRV";
    var oModel = new sap.ui.model.odata.v2.ODataModel(serviceUrl);
    oModel.read("/ZSS18_T4_PROJSet")
    var view = this.getView();
    this.getView().setModel(oModel);
    this.getView().addDelegate({
        onBeforeShow : function(evt) {
            view.setBindingContext(evt.data.ctx);

        }

    });
},