Eu assisti alguns tutoriais sobre navegação + passagem de dados entre visualizações, mas não funciona no meu caso. Meu objetivo é alcançar o seguinte:

Na MainPage, o usuário pode ver uma tabela com produtos (arquivo JSON). (Funciona bem!)Depois de pressionar o botão "Detalhes", a página Detalhes ("Formulário") é exibida com todas as informações sobre a seleção.

A navegação funciona perfeitamente e a página Detalhes está aparecendo, no entanto, a ligação de dados parece não funcionar (nenhum dado é exibido). Minha ideia é passar a String JSON para a Página de Detalhes. Como posso conseguir isso? Ou existe uma maneira mais elegante?

Aqui está o código até agora:

Controlador MainView

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");
    }
});

Visualização do formulário de detalhes:

<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>

Controlador de formulário de detalhes:

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

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