<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.walkthrough.controller.Detail">
    <Page title="Walkthrough - Details" showNavButton="true" navButtonPress="onNavButtonPress">
            <ObjectHeader 
                    intro="{invoice>ShipperName}" 
                    title="{invoice>ProductName}"/>
    </Page>
</mvc:View>

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "../model/formatter",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function(Controller, JSONModel, formatter, Filter, FilterOperator) {
    "use strict";

    return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
        formatter: formatter,
......

,
        onPress: function(oEvent) {
            var oItem = oEvent.getSource();
            var sPath = window.encodeURIComponent(oItem.getBindingContext("invoice").getPath().substr(1));
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("detail", { invoicePath: sPath });        
        }
    });
});

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
        onInit: function () {
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
        },
        _onObjectMatched: function (oEvent) {
            this.getView().bindElement({
                path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath),
                model: "invoice"
            });
        },
        onNavButtonPress: function(oEvent) {
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("overview");
        }
    });
});