Data Not Visible in Second View

Question

I am facing one issue with data not being visible in my project.

I have created two views: Input.view.xml and plant.view.xml. In my first view, I have a button as "Material Details" and on clicking that, it moves to second view. However, it is coming blank.

My JSON file is having all the data but it's not coming in second view.

Can you please suggest what is the issue and how to fix it?

"Input View" (First View)

<mvc:View
    controllerName="stock.controller.main"
    xmlns:l="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:viz="sap.viz.ui5.controls"
    xmlns="sap.m">
    <App id="app">
        <l:VerticalLayout
            class="sapUiContentPadding"
            width="100%"
            height="100%">
            <Label
                text="Product"
                labelFor="productInput" />
            <Input id="productInput"
                placeholder="Enter Material ..."
                showSuggestion="true"
                showTableSuggestionValueHelp="false"
                suggestionRows="{/ProductCollection}"
                suggestionItemSelected="onSelectItem">
                <suggestionColumns>
                    <Column
                        hAlign="Begin"
                        popinDisplay="Inline"
                        demandPopin="true">
                        <Label text="Name"/>
                    </Column>
                </suggestionColumns>
                <suggestionRows>
                    <ColumnListItem>
                        <Label id="inputKey" text="{ProductId} {Name}"/>
                    </ColumnListItem>
                </suggestionRows>
            </Input>
            <Button id="onDisplay"
                text="{i18n>materialDetails}"
                press="onDisplayPlant"
                class="sapUiTinyMarginEnd" />
        </l:VerticalLayout>
    </App>
</mvc:View>

plant.view.xml (Second View)

<mvc:View
    controllerName="stock.controller.plant"
    xmlns="sap.m"
    xmlns:viz="sap.viz.ui5.controls"
    xmlns:l="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc">
    <MessagePage
        showNavButton="true"
        navButtonPress="onNavBack"/>
        <Table id="idProductsTable"
            inset="false"
            items="{
                path: '/ProductCollection',
                sorter: {
                    path: 'Name'
                }
            }">
            <headerToolbar>
                <Toolbar>
                    <Title text="Products" level="H2" />
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column width="12em">
                    <Text text="Product" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true">
                    <Text text="Supplier" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true"
                    hAlign="End">
                    <Text text="Dimensions" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true"
                    hAlign="Center">
                    <Text text="Weight" />
                </Column>
                <Column hAlign="End">
                    <Text text="Price" />
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <ObjectIdentifier
                        title="{Name}"
                        text="{ProductId}"/>
                    <Text text="{SupplierName}" />
                    <Text text="{Width} x {Depth} x {Height} {DimUnit}" />
                    <ObjectNumber
                        number="{WeightMeasure}"
                        unit="{WeightUnit}"
                        state="{
                            parts: [
                                {path: 'WeightMeasure'},
                                {path: 'WeightUnit'}
                            ],
                            formatter: 'stock.Formatter.weightState'
                        }" />
                    <ObjectNumber
                        number="{
                            parts: [{
                                path: 'Price'
                            }, {
                                path: 'CurrencyCode'
                            }],
                            type: 'sap.ui.model.type.Currency',
                            formatOptions: {
                                showMeasure: false
                            }
                        }"
                        unit="{CurrencyCode}" />
                </ColumnListItem>
            </items>
        </Table>
    </MessagePage>
</mvc:View>

plant.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "jquery.sap.global",
    "stock/Formatter",
    "sap/ui/core/routing/History",
    "sap/ui/model/json/JSONModel"
], function (Controller, jQuery, Formatter, History,JSONModel) {
    "use strict";

    var TableController =  Controller.extend("stock.controller.plant", {
        onInit: function () {
            var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
            this.getView().setModel(oModel);
        },

        getRouter : function () {
            return sap.ui.core.UIComponent.getRouterFor(this);
        },

        onNavBack: function () {
            var oHistory = History.getInstance();
            var sPreviousHash = oHistory.getPreviousHash();
            if (sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                this.getRouter().navTo("input", {}, true);
            }
        }
    });
    return TableController;
});

Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/core/mvc/XMLView",
    "sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel, XMLView) {
    "use strict";

    var Component = UIComponent.extend("stock.Component", {
        metadata: {
            manifest: "json",
            getTable: function () {
                return this._rootView.getContent()[0];
            }
        },
        publicMethods: [
            "getTable"
        ],
        dependencies: {
            libs: [
                "sap.m",
                "sap.ui.layout"
            ]
        },
        rootView: "stock.view.input",
        config: {
            sample: {
                files: [
                    "view.input.view.xml",
                    "controller.main.controller.js",
                    "Formatter.js"
                ],
                description : "In this example assisted input is provided with table-like suggestions where several columns can display more details."
            }
        },

        init : function () {
            UIComponent.prototype.init.apply(this, arguments);
            this.getRouter().initialize();
        }
    });

    Component.prototype.createContent = function () {
        this._rootView = sap.ui.xmlview({ viewName : "stock.view.plant" });
        return this._rootView;
    };

    return Component;
});