<!DOCTYPE html>
<html>

  <head>
    <script id="sap-ui-bootstrap"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-resourceroots='{
                "sap.ui.table" : "./"
            }'>
    </script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body class="sapUiBody">
    <div id="content"></div>
  </body>
</html>
// Code goes here

new sap.m.Shell({
  app: new sap.ui.core.ComponentContainer({
    name: "sap.ui.table",
    height: "100%"
  })
}).placeAt("content");
/* Styles go here */

.myButton {
  background-color: green;
  width: 150px;
}

.myText {
  font-weight: bold;
}
sap.ui.define(["sap/ui/core/UIComponent"], function(UIComponent) {
  "use strict";
  return UIComponent.extend("sap.ui.table.Component", {
    metadata: {
      version: "1.0",
      rootView: "sap.ui.table.App",
      "routing": {
        "config": {
          "routerClass": "sap.m.routing.Router",
          "viewType": "XML",
          "viewPath": "sap.ui.table",
          "controlId": "app",
          "controlAggregation": "pages",
          "transition": "slide"
        },
        "routes": [{
          "pattern": "",
          "name": "appHome",
          "target": "home"
        }, {
          "pattern": "odata",
          "name": "odataTable",
          "target": "odata"
        }],
        "targets": {
          "home": {
            "viewName": "Home",
            "viewLevel": 1
          },
          "odata": {
            "viewName": "OData",
            "viewLevel" : 2
          }
        }
      }
    },
    init: function() {
      // call the init function of the parent
      UIComponent.prototype.init.apply(this, arguments);

      this.getRouter().initialize();

      var oresModel = new sap.ui.model.resource.ResourceModel({
        bundleName: "sap.ui.table.i18n"
      });

      this.setModel(oresModel, "i18n");
      //To solve CORS issue add this before Uri- https://cors-anywhere.herokuapp.com/
      var northwindUri = "http://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json";
      var ojsonModel = new sap.ui.model.json.JSONModel(northwindUri);
      console.log("JSON Model", ojsonModel);

      this.setModel(ojsonModel, "jsonModel");

      $.getJSON(northwindUri).done(function(data) {
        console.log("jQuery Data JSON", data);
      });

      var gatewayUri = "https://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/GWDEMO";
      var odataModel = new sap.ui.model.odata.ODataModel(gatewayUri, false, "P1940678860", "rahul123", null);
      
      odataModel.read("/ProductCollection", null, null, true, function(oData, response) {
        console.log("Read success", oData);
      }, function(e) {
        console.log("Read Error", JSON.stringify(e));
      });

      this.setModel(odataModel, "odataModel");

    },

    onBack: function(oEvent) {
      var sPreviousHash;
      
      var oHistory = sap.ui.core.routing.History.getInstance();
      sPreviousHash = oHistory.getPreviousHash();
      if (sPreviousHash !== undefined) {
        window.history.go(-1);
      } else {
        this.getRouter().navTo("appHome", {}, true /*no history*/ );
      }
    }
  });
});
<mvc:View
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<App id="app">
	</App>
</mvc:View>
<mvc:View
	controllerName="sap.ui.table.Home"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
			<Page>
			  <headerContent>
			    <Bar design="Header">
			      <contentMiddle>
			        <Text class="myText" text="JSON Table" />
			      </contentMiddle>
			      <contentRight>
			        <Button icon="sap-icon://arrow-right" press="onNext" />
			      </contentRight>
			   </Bar>
			  </headerContent>
					<Table id="jsonTable" headerText="Products"
					       inset="true"
					       width="auto"
					       items="{jsonModel>/d/results}">
					  <columns>
					    <Column>
    					  <Text text="Product D"></Text>
    				  </Column>
    				  <Column>
    					  <Text text="Product Name"></Text>
    				  </Column>
    				  <Column>
    					  <Text text="Category ID" />
    				  </Column>
    				  <Column>
    					  <Text text="Quantity Per Unit" />
    				  </Column>
					  </columns>
					  <items>
              <ColumnListItem>
        				<cells>
        					<Text text="{jsonModel>ProductID}" />
        					<Text text="{jsonModel>ProductName}" />
        					<Text text="{jsonModel>CategoryID}" />
        					<Text text="{jsonModel>QuantityPerUnit}" />
        				</cells>
        			</ColumnListItem>					    
					  </items>
					</Table>
			</Page>
</mvc:View>
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
  "use strict";
  return Controller.extend("sap.ui.table.Home", {
    onNext: function(oEvent) {
      this.getOwnerComponent().getRouter().navTo("odataTable");
    }
  });
});
<mvc:View
   controllerName="sap.ui.table.OData"
   xmlns="sap.m"
   xmlns:l="sap.ui.layout"
   xmlns:mvc="sap.ui.core.mvc">
  <Page title="OData Table" showNavButton="true"
        navButtonPress="onNavBack"
        class="sapUiResponsiveContentPadding">
    <List headerText="Product Details from Gateway Demo System"
          items="{odataModel>/ProductCollection}">
      <items>
        <ObjectListItem type="Active"
                        press="onSelect"
                        intro="{odataModel>ProductID}"
                        title="{odataModel>ProductName}"
                        number="{odataModel>UnitPrice}"
                        numberUnit="{odataModel>CurrencyText}">
          <attributes>
            <ObjectAttribute title="Product Description" 
                             text="{odataModel>ProductDescription}">
            </ObjectAttribute>
          </attributes>
        </ObjectListItem>
      </items>
    </List>
    <Panel id="prodDetailsPanel"
               headerText="Details"
               class="sapUiResponsiveMargin" 
               width="auto">
        <Label text="Product ID" />
        <Input id="prodId" value="{odataModel>ProductID}" />
        
        <Label text="Product Name" />
        <Input id="prodName" value="{odataModel>ProductName}" />
        
        <Label text="Product Description" />
        <Input id="prodDesc" value="{odataModel>ProductDescription}" />
    </Panel>
  </Page>
</mvc:View>
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
  "use strict";
  return Controller.extend("sap.ui.table.OData", {
    onNavBack: function(oEvent) {
      this.getView().byId("prodId").setValue();
      this.getView().byId("prodName").setValue();
      this.getView().byId("prodDesc").setValue();
      this.getOwnerComponent().onBack(oEvent);
    },
    onSelect: function(oEvent) {
      
      var sPath = oEvent.getSource().getBindingContext("odataModel").getPath();
      console.log("Path is : ", oEvent.getSource().getBindingContext("odataModel").getPath());

      var oProductDetailPanel = this.getView().byId("prodDetailsPanel");
      oProductDetailPanel.bindElement({
        path: sPath,
        model: "odataModel"
      });
    }
  });
});
# App Descriptor

iWantToNavigate=I want to navigate
homePageTitle=JSON Data Table - Products

NotFound=Not Found
NotFound.text=Sorry, but the requested resource is not available.
NotFound.description=Please check the URL and try again.