sapui5 - Passing Data from Master to Detail Page

Question

I watched some tutorials about navigation + passing data between views, but it doesn't work in my case. My goal is to achieve the follwing:

1. On the MainPage the user can see a table with products (JSON file). (Works fine!)
2. After pressing the "Details" button, the Details Page ("Form") is shown with all information about the selection.

The navigation works perfectly and the Detail page is showing up, however the data binding doesnt seem to work (no data is displayed) My idea is to pass the JSON String to the Detail Page. How can I achieve that? Or is there a more elegant way?

Here is the code so far:

MainView Controller

sap.ui.controller("my.zodb_demo.MainView", {

    onInit: function() {
        var oModel = new sap.ui.model.json.JSONModel("zodb_demo/model/products.json");

        var mainTable = this.getView().byId("productsTable");
        this.getView().setModel(oModel);
        mainTable.setModel(oModel);
        mainTable.bindItems("/ProductCollection", new sap.m.ColumnListItem({
            cells: [new sap.m.Text({
                text: "{Name}"
            }), new sap.m.Text({
                text: "{SupplierName}"
            }), new sap.m.Text({
                text: "{Price}"
            })]
        }));
    },

    onDetailsPressed: function(oEvent) {
        var oTable = this.getView().byId("productsTable");

        var contexts = oTable.getSelectedContexts();
        var items = contexts.map(function(c) {
            return c.getObject();
        });

        var app = sap.ui.getCore().byId("mainApp");
        var page = app.getPage("DetailsForm");

        //Just to check if the selected JSON String is correct
        alert(JSON.stringify(items));


        //Navigation to the Detail Form
        app.to(page, "flip");
    }
});

Detail Form View:

<mvc:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" controllerName="my.zodb_demo.DetailsForm">
  <Page title="Details" showNavButton="true" navButtonPress="goBack">
    <content>
      <f:Form id="FormMain" minWidth="1024" maxContainerCols="2" editable="false" class="isReadonly">
        <f:title>
          <core:Title text="Information" />
        </f:title>
        <f:layout>
          <f:ResponsiveGridLayout labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1" />
        </f:layout>
        <f:formContainers>
          <f:FormContainer>
            <f:formElements>
              <f:FormElement label="Supplier Name">
                <f:fields>
                  <Text text="{SupplierName}" id="nameText" />
                </f:fields>
              </f:FormElement>
              <f:FormElement label="Product">
                <f:fields>
                  <Text text="{Name}" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
          </f:FormContainer>
        </f:formContainers>
      </f:Form>
    </content>
  </Page>
</mvc:View>

Detail Form Controller:

sap.ui.controller("my.zodb_demo.DetailsForm", {

    goBack: function() {
        var app = sap.ui.getCore().byId("mainApp");
        app.back();
    }
});

Answer 1

The recommended way to pass data between controllers is to use the EventBus

sap.ui.getCore().getEventBus();

You define a channel and event between the controllers. On your DetailController you subscribe to an event like this:

onInit : function() {
    var eventBus = sap.ui.getCore().getEventBus();
    // 1. ChannelName, 2. EventName, 3. Function to be executed, 4. Listener
    eventBus.subscribe("MainDetailChannel", "onNavigateEvent", this.onDataReceived, this);)
},

onDataReceived : function(channel, event, data) {
   // do something with the data (bind to model)
   console.log(JSON.stringify(data));
}

And on your MainController you publish the Event:

...
//Navigation to the Detail Form
app.to(page,"flip");
var eventBus = sap.ui.getCore().getEventBus();
// 1. ChannelName, 2. EventName, 3. the data
eventBus.publish("MainDetailChannel", "onNavigateEvent", { foo : "bar" });
...

See the documentation here: https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.EventBus.html#subscribe

And a more detailed example: http://scn.sap.com/community/developer-center/front-end/blog/2015/10/25/openui5-sapui5-communication-between-controllers--using-publish-and-subscribe-from-eventbus