JSON Data not getting binded in the view navigated from first view in SAPUI5 app

Question

My SAPUI5 application has first view with split container containing two pages(master and detail) in XML view.The master page has list binded with JSON file and on clicking on any data from the list it gets populated in the detail side(Both are in the same view) There are two more full pages views with navigation between the first view "SplitApp.view.xml" and "Secondpage.view.xml" but data is not getting binded in Secondpage view. I am taking data from an external JSON Model.

In my first view, SplitApp.view.xml", the button for navigating to second view is

    <Button icon="sap-icon://cart" press="navToShoppingCart" text="Cart"/>

In my controller:

    navToShoppingCart: function(oEvent) {
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.navTo("Secondpage");
        this.showDetails2(oEvent.getSource().getBindingContext().getPath('CustomerMaster/0'.substring(15)));
    },

    showDetails2: function(secondPath) {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().setModel(omodel);
        this.getView("Secondpage").byId('shopTable').bindElement({
            path: secondPath
        });
    },

As I am new to SAPUI5, can you help me in understanding what is wrong in this code and how to proceed further? What do I need to write in the "Secondpage.contoller.js" and do I need to specify anything in manifest.json and any other file? I am using webide.

Answer 1

Master Controller:

navToShoppingCart: function(oEvent) {
    var router = sap.ui.core.UIComponent.getRouterFor(this);
    router.navTo("Secondpage", {
      path: oEvent.getSource().getBindingContext().getPath('CustomerMaster/0'.substring(15))
    });
  },

Detail Controller:

onInit: function() {
    var omodel = new sap.ui.model.json.JSONModel();
    omodel.loadData("model/model.json");
    this.getView().setModel(omodel);
    var router = sap.ui.core.UIComponent.getRouterFor(this);
    router.getRoute("Secondpage").attchMatched(this._onRouteMatched, this);
  }, _onRouteMatched: function(oEvent) {
    var path = oEvent.getParameter('arguments').path;
    this.getView().byId("shopTable").bindItems({
      path: path
    });
  },

Note: Make sure you have valid pattern in component.js file..

Answer 2

I have to bind the data to the table of second view "Secondpage.view.xml"

First view :

<mvc:View controllerName="shopping.controller.SplitApp" displayBlock="true"
xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc"
xmlns:t="sap.m.table" xmlns="sap.m">
<Bar>
    <contentLeft>
        <Button icon="sap-icon://menu2"/>
        <Button icon="http://www.sap.com/global/images/SAPLogo.gif"/>
    </contentLeft>
    <contentRight>
        <Button icon="sap-icon://search"/>
        <Button icon="sap-icon://account" text="Priyanka Singh"/>
    </contentRight>
</Bar>
<SplitContainer id="SplitContDemo" initialDetail="detail" initialMaster="master">

    <masterPages>

        <Page class="sapUiStdPage" icon="sap-icon://action" id="master" navButtonPress="onPressMasterBack" showNavButton="true" title="Smart Solutions Products">
            <subHeader>
        <Bar id="headerBar">
            <contentMiddle>
                <SearchField id="searchField" liveChange="onSearch" showRefreshButton="{= !${device>/support/touch} }" tooltip="{i18n>masterSearchTooltip}"
                    width="100%"></SearchField>
            </contentMiddle>
        </Bar>
    </subHeader>

        <List id="list1" items="{path:'/CustomerMaster'}">
            <items>
                <ObjectListItem type="Active" press="onListItemPress" number="{price}" title="{name}"/>
            </items>
        </List>
        </Page>
    </masterPages>

    <detailPages>
        <Page class="sapUiStdPage" id="detail" title="Product">

                <Button icon="sap-icon://cart" press="navToShoppingCart" text="Cart"/>

        <content>
        <ObjectHeader id="objectHeader" number="{ path: 'price' }" title="{name}"></ObjectHeader>
        <IconTabBar class="sapUiResponsiveContentPadding" id="iconTabBar">
            <items>
                <IconTabFilter id="iconTabBarFilter1" text="Information">
                    <content>
                        <f:SimpleForm id="form1" columnsL="1" columnsM="1" editable="false" emptySpanL="4" emptySpanM="4" labelSpanL="3" labelSpanM="3"
                            layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024">
                            <f:content>
                                <Label text="Material Group"/>
                                <Text text="{group}"/>
                                <Label text="Delivering Plant"/>
                                <Text text="{plant}"/>
                                <Label text="Division"/>
                                <Text text="{division}"/>
                                <Label text="Product Heirarchy"/>
                                <Text text="{heirarchy}"/>
                            </f:content>
                        </f:SimpleForm>
                    </content>
                </IconTabFilter>
            </items>
        </IconTabBar>
        </content>
        </Page>
    </detailPages>
</SplitContainer>

Second controller:

sap.ui.define([
"sap/ui/core/mvc/Controller"

], function(Controller) { "use strict";

return Controller.extend("shopping.controller.Secondpage", {
    onInit: function() {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().setModel(omodel);
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.getRoute("Secondpage").attachMatched(this._onRouteMatched, this);
    },
    _onRouteMatched: function(oEvent) {
        var path = oEvent.getParameter('arguments').path;
        this.getView().byId("shopTable").bindItems({
            path: path
        });
    },

    onNavBack: function() {
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.navTo("SplitApp");
    }

});

});

First controller:

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter"

], function(Controller, Filter) { "use strict";

return Controller.extend("shopping.controller.SplitApp", {

    onInit: function() {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().byId("list1").setModel(omodel);
    },

    onListItemPress: function(oEvent) {
        this.showDetails1(oEvent.getSource().getBindingContext().getPath());
    },

    showDetails1: function(detailPath) {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().setModel(omodel);
        this.getView().bindElement({
            path: detailPath
        });

    },

    navToShoppingCart: function(oEvent) {
    var router = sap.ui.core.UIComponent.getRouterFor(this);
    router.navTo("Secondpage", {
      path: oEvent.getSource().getBindingContext().getPath('CustomerMaster/0'.substring(15))
    });
  },

    onSearch: function(oEvent) {
        var aFilters = [];
        var sQuery = oEvent.getSource().getValue();
        if ((sQuery && sQuery.length) > 0) {

            var filter = new Filter("name", sap.ui.model.FilterOperator.Contains, sQuery);

            aFilters.push(filter);
        }
        var table1 = this.getView().byId("list1");
        var binding = table1.getBinding("items");
        binding.filter(aFilters);
    }

});

});

Second view

<mvc:View controllerName="shopping.controller.Secondpage" xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns="sap.m" xmlns:table="sap.m.table">
<Bar>
    <contentLeft>
        <Button icon="sap-icon://menu2"/>
        <Button icon="http://www.sap.com/global/images/SAPLogo.gif"/>
    </contentLeft>
    <contentRight>
        <Button icon="sap-icon://search"/>
        <Button icon="sap-icon://account" text="Priyanka Singh"/>
    </contentRight>
</Bar>
<Page navButtonPress="onNavBack" showNavButton="true" title="Cart">
    <content>
        <f:SimpleForm columnsL="1" columnsM="1" editable="false" emptySpanL="4" emptySpanM="4" labelSpanL="3" labelSpanM="3"
            layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024">
            <f:content>
                <Label text="Price"/>
                <Text text="10000"/>
                <Label text="Surcharge"/>
                <Text text="5000"/>
                <Label text="Rebate 0"/>
                <Text text="15000"/>
                <Label text="Delivery Conformation"/>
                <Text text="20/12/2016"/>
            </f:content>
        </f:SimpleForm>
        <Table id="shopTable" items="{path:'CustomerMaster'}">
            <headerToolbar>
                <Toolbar>
                    <Title text="Items(1)"/>
                    <ToolbarSpacer></ToolbarSpacer>
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column>
                    <Text text=" "/>
                </Column>
                <Column>
                    <Text text="Description"/>
                </Column>
                <Column>
                    <Text text="Product Number"/>
                </Column>
                <Column>
                    <Text text="Requested Quantity"/>
                </Column>
                <Column>
                    <Text text="Requested Date"/>
                </Column>
            </columns>
            <items>
                <ColumnListItem >
                    <cells>
                        <Text text=""/>
                        <Text text="{name}"/>
                        <Text text="{ProdNo}"/>
                        <Text text="{quantity}"/>
                        <Text text="{reqDate}"/>
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
        <ToolbarSpacer></ToolbarSpacer>
        <Button press="navToFinalPage" text="Order Details"/>
    </content>
</Page>

JSON file "model.json" is inside model folder :-

{
"CustomerMaster":
[
     {
        "name":"DUOTECH",
        "price":"10000",
        "group":"Pumps",
        "plant":"Lyon",
        "division":"Cross",
        "heirarchy":"Pumps Machine",

        "ProdNo":"01",
        "quantity":"1",
        "date":"16/02/2016",
        "reqDate":"16/12/2016",
        "confDate":"20/12/2016",

        "order":"01",
        "party":"Smart Solutions",
        "address":"Calvinstr 41",
        "city":"Berlin",
        "state":"Berlin",
        "zip":"12345",
        "country":"Germany",
        "phone":"0987656",
        "carrier":" ",
        "incoterms":"Cif Berlin",
        "instruction":"Urgent for Michael Rich",
        "note":" "
    },

    {
        "name":"TECH SOLN",
        "price":"20000",
        "group":"Heavy Pumps",
        "plant":"Lyon",
        "division":"Cross",
        "heirarchy":"Pumps Machine",

        "ProdNo":"02",
        "quantity":"2",
        "date":"17/02/2016",
        "confDate":"22/12/2016",

        "order":"02",
        "party":"Techno Solutions",
        "address":"Calvinstr 41",
        "city":"Sydney",
        "state":"Sydney",
        "zip":"12345",
        "country":"Autralia",
        "phone":"0987656",
        "carrier":" ",
        "incoterms":"Cif Berlin",
        "instruction":"Urgent for David Rickman",
        "note":" "
    },

    {
        "name":"CYBER TECH",
        "price":"30000",
        "group":"Monitors",
        "plant":"Lyon",
        "division":"Cross",
        "heirarchy":"Monitors Machine",

        "ProdNo":"03",
        "quantity":"3",
        "date":"18/02/2016",
        "confDate":"25/12/2016",

        "order":"03",
        "party":"Cyber Solutions",
        "address":"Calvinstr 41",
        "city":"New York",
        "state":"New York",
        "zip":"12345",
        "country":"USA",
        "phone":"0987656",
        "carrier":" ",
        "incoterms":"Cif Berlin",
        "instruction":"Urgent for Rachel Green",
        "note":" "
    }

    ]

}