getPage = null

Hey there! I'm going through the sample code from the book "SAPUI5 The Comprehensive Guide" (chapter 4).

I created the app, it has a master & detail view (with master & detail controller). The only thing that does not work is the binding between the table entry on the master page and the detail data that's supposed to appear on the detail page.

Specifically, it looks like the oPage variable in the master controller function onListPress is null, when I click on any of the table entries.

This is the master controller:

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";
    return Controller.extend("sapui5.demo.mvcapp.controller.Master", {

        onListPress: function(oEvent) {
            var sPageId = "detailPage";
            oApp.to(sPageId);
            var oPage = oApp.getPage(sPageId);
            var oContext = oEvent.getSource().getBindingContext();
            oPage.setBindingContext(oContext);
        }
    });
});

Master view, where onListPress is called:

sap.ui.jsview("sapui5.demo.mvcapp.view.Master", {
    getControllerName: function() {
        return "sapui5.demo.mvcapp.controller.Master";
    },
    createContent: function(oController) {

        // the columns will act as column headers
        var aColumns = [
            new sap.m.Column({
                header: new sap.m.Text({
                    text: "ID"
                })
            }),
            new sap.m.Column({
                header: new sap.m.Text({
                    text: "Name"
                })
            })
        ];

        // in the template we’ll display the supplier information
        var oTemplate = new sap.m.ColumnListItem({
            type: "Navigation",
            press: [oController.onListPress, oController],
            cells: [
                new sap.m.ObjectIdentifier({
                    text: "{ID}"
                }),
                new sap.m.ObjectIdentifier({
                    text: "{Name}"
                })
            ]
        });

        // in the header we’re displaying the number of suppliers
        var oTableHeader = new sap.m.Toolbar({
            content: [
                new sap.m.Title({
                    text: "Number of Suppliers: {/CountSuppliers}"
                })
            ]
        });

        // we create the table with the columns and header
        var oTable = new sap.m.Table({
            columns: aColumns,
            headerToolbar: oTableHeader
        });

        // we bind the table items to the /Suppliers entries
        // and to our template
        oTable.bindItems("/Suppliers", oTemplate);

        var oPageMaster = new sap.m.Page({
            title: "Supplier Overview",
            content: [oTable]
        });

        return oPageMaster;
    }
});

And index.html:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC App</title>
    <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-compatVersion="edge" data-sap-ui-resourceroots='{"sapui5.demo.mvcapp": "./webapp/"}'>
    </script>
    <script>
        // application data
        var oData = {
            "CountSuppliers": "2",
            "Suppliers": [{
                "ID": 0,
                "Name": "Exotic Liquids",
                "Address": {
                    "Street": "NE 228th",
                    "City": "Sammamish",
                    "State": "WA",
                    "ZipCode": "98074",
                    "Country": "USA"
                }
            }, {
                "ID": 1,
                "Name": "Tokyo Traders",
                "Address": {
                    "Street": "NE 40th",
                    "City": "Redmond",
                    "State": "WA",
                    "ZipCode": "98052",
                    "Country": "USA"
                }
            }]
        };

        // model creation and setting data
        var oModel = sap.ui.model.json.JSONModel();
        oModel.setData(oData);

        // setting the model to the core
        // so that it’s available in the whole application
        sap.ui.getCore().setModel(oModel);

        var oPageMasterView = sap.ui.view("masterPage", {
            type: sap.ui.core.mvc.ViewType.JS,
            viewName: "sapui5.demo.mvcapp.view.Master",
        });

        var oPageDetail = sap.ui.view("detailPage", {
            type: sap.ui.core.mvc.ViewType.JS,
            viewName: "sapui5.demo.mvcapp.view.Detail",
        });

        var oApp = new sap.m.App({
            // initialPage: "masterPage"
        });

        oApp.addPage(oPageMasterView);
        oApp.placeAt("content");
    </script>
</head>

<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html> 

This is what I get when I press one entry in the table on the master page:

Error is "Uncaught TypeError: Cannot read property 'setBindingContext' of null".

Thank you in advance for helping a noob !

Cosmin

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Jan 23, 2017 at 09:08 PM
    var oPageMasterView =sap.ui.view("masterPage", {type:sap.ui.core.mvc.ViewType.JS,
                viewName:"sapui5.demo.mvcapp.view.Master",});
    
            var oPageDetail =sap.ui.view("detailPage", {type:sap.ui.core.mvc.ViewType.JS,
                viewName:"sapui5.demo.mvcapp.view.Detail",});
    
            var oApp =newsap.m.App({// initialPage:"masterPage"});
    
            oApp.addPage(oPageMasterView);

    seems you only add the master view, not the detail view.

    oApp.addPage(oPageDetail );  try this
    Add comment
    10|10000 characters needed characters exceeded

Skip to Content