JSON Model - OData Model - Table Example - Data Binding - Aggregation Binding

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

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",
          "bypassed": {
            "target": "notFound"
          }
        },
        "routes": [{
          "pattern": "",
          "name": "appHome",
          "target": "home"
        }, {
          "pattern": "odata",
          "name": "odataTable",
          "target": "odata"
        }],
        "targets": {
          "home": {
            "viewName": "Home",
            "viewLevel": 1
          },
          "notFound": {
            "viewName": "NotFound",
            "transition": "show"
          },
          "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 = "https://cors-anywhere.herokuapp.com/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*/ );
      }
    }
  });
});

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

<mvc:View
	controllerName="sap.ui.table.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<App id="app">
	</App>
</mvc:View>

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
  return Controller.extend("sap.ui.table.App", {
    onInit: function() {
      
    }
  });
});

<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"
					       includeItemInSelection="true" 
					       items="{jsonModel>/d/results}" 
					       itemPress="onPress">
					  <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 type="Active">
        				<cells>
        					<Text text="{jsonModel>ProductID}" />
        					<Text text="{jsonModel>ProductName}" />
        					<Text text="{jsonModel>CategoryID}" />
        					<Text text="{jsonModel>QuantityPerUnit}" />
        				</cells>
        			</ColumnListItem>					    
					  </items>
					</Table>
        <Panel id="productDetailsPanel"
               headerText="Details"
               class="sapUiResponsiveMargin" 
               width="auto">
            <Label text="Product ID" />
            <Input value="{jsonModel>ProductID}" />
            
            <Label text="ProductName" />
            <Input value="{jsonModel>ProductName}" />
            
            <Label text="Category ID" />
            <Input value="{jsonModel>CategoryID}" />
            
            <Label text="QuantityPerUnit" />
            <Input value="{jsonModel>QuantityPerUnit}" />
        </Panel>
        <footer>
          <Bar>
            <contentRight>
              <Button id="idButton" text="See More" press="onMore" />
            </contentRight>
          </Bar>
        </footer>
			</Page>
</mvc:View>

sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
  "use strict";
  return Controller.extend("sap.ui.table.Home", {
    onPress: function(oEvent) {

      console.log("Path", oEvent.getParameters().listItem.getBindingContext("jsonModel").sPath);

      var oldsPath = localStorage.getItem("oldsPath");
      console.log("Old Selected Item", this.getOwnerComponent().getModel("jsonModel").getProperty(oldsPath));

      var sPath = oEvent.getParameters().listItem.getBindingContext("jsonModel").sPath;

      var oProductDetailPanel = this.getView().byId("productDetailsPanel");
      oProductDetailPanel.bindElement({
        path: sPath,
        model: "jsonModel"
      });

      console.log("Current Selected Item", this.getOwnerComponent().getModel("jsonModel").getProperty(sPath));
      localStorage.setItem("oldsPath", sPath);
    },
    onNext: function(oEvent) {
      this.getOwnerComponent().getRouter().navTo("odataTable");
    },
    onMore: function(oEvent) {
      //display the "notFound" target without changing the hash
      //this.getOwnerComponent().getRouter().getTargets().display("notFound");
      this.getOwnerComponent().getTargets().display("notFound", {
        fromTarget: "home"
      });
    }
  });
});

<mvc:View
   controllerName="sap.ui.table.NotFound"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <MessagePage
      title="{i18n>NotFound}"
      text="{i18n>NotFound.text}"
      description="{i18n>NotFound.description}"
      showNavButton="true"
		  navButtonPress="onNavBack"/>
</mvc:View>

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
  return Controller.extend("sap.ui.table.NotFound", {
    onInit: function() {
      var oRouter, oTarget;
      oRouter = this.getOwnerComponent().getRouter();
      oTarget = oRouter.getTarget("notFound");
      oTarget.attachDisplay(function(oEvent) {
        this._oData = oEvent.getParameter("data"); //store the data
        console.log(this._oData);
      }, this);
    },
    onNavBack: function(oEvent) {
      var oHistory, sPreviousHash, oRouter;
      // in some cases we could display a certain target when the back button is pressed
      if (this._oData && this._oData.fromTarget) {
        this.getOwnerComponent().getRouter().getTargets().display(this._oData.fromTarget);
        delete this._oData.fromTarget;
        //return;
      }
      this.getOwnerComponent().onBack(oEvent);
    }
  });
});

<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 id="idList" items="{
                    path: 'odataModel>/ProductCollection',
                    sorter: {
                    path: 'ProductCategory',
                    group : true
                            }
                    }">
       <headerToolbar>
         <Title text="Product Details from Gateway Demo System" />
         <Toolbar>
            <ToolbarSpacer/>
            <SearchField width="50%" search="onFilter" selectOnFocus="false"/>
         </Toolbar>
      </headerToolbar>
      <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="{path: 'odataModel>ProductID', 
                                   formatter: '.formatValue'}" />
        
        <Label text="Product Name" />
        <Input id="prodName" value="{parts:[
                                            {path: 'odataModel>ProductName'}
                                            ],
                                           formatter: '.formatSome'
                                    }" />
        <Label text="Product Description" />
        <Input id="prodDesc" value="{odataModel>ProductDescription}" />
      <l:HorizontalLayout>
        <l:content>
          <Button text="Create" press="onCreate" class="sapUiTinyMargin"/>
          <Button text="Update" press="onUpdate" class="sapUiTinyMargin"/>
          <Button text="Delete" press="onDelete" class="sapUiTinyMargin"/>
        </l:content>
      </l:HorizontalLayout>
    </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"
      });
    },
    onCreate: function() {
      var oView = this.getView();
      var oModel = this.getOwnerComponent().getModel("odataModel");
      console.log("Boom", oModel);
      var oProductDetailPanel = this.getView().byId("prodDetailsPanel");

      console.log("Check this", oProductDetailPanel.getElementBinding("odataModel"));
      var sPath = oProductDetailPanel.getElementBinding("odataModel").sPath;

      var Product = {
        ProductID: this.getView().byId("prodId").getValue(),
        ProductName: this.getView().byId("prodName").getValue(),
        ProductDescription: this.getView().byId("prodDesc").getValue()
      };

      oModel.read(sPath, null, null, true, function(oData, response) {
        var oPostData = oData;
        delete oPostData.__metadata;

        oPostData.ProductID = Product.ProductID;
        oPostData.ProductName = Product.ProductName;
        oPostData.ProductDescription = Product.ProductDescription;

        oModel.create("/ProductCollection", oPostData, null, function(oData, response) {
          oView.byId("prodId").setValue();
          oView.byId("prodName").setValue();
          oView.byId("prodDesc").setValue();
          console.log("Create successfull for Product ID", response, response.data['ProductID']);

        }, function(e) {
          console.log("Create failed", JSON.stringify(e));
        });

      }, function(e) {
        console.log("Read Error in Create Operation", JSON.stringify(e));
      });
    },
    onUpdate: function() {
      var oView = this.getView();
      var oModel = this.getOwnerComponent().getModel("odataModel");

      var oProductDetailPanel = this.getView().byId("prodDetailsPanel");

      console.log("Check this", oProductDetailPanel.getElementBinding("odataModel"));
      var sPath = oProductDetailPanel.getElementBinding("odataModel").sPath;

      var Product = {
        ProductID: this.getView().byId("prodId").getValue(),
        ProductName: this.getView().byId("prodName").getValue(),
        ProductDescription: this.getView().byId("prodDesc").getValue()
      };

      oModel.read(sPath, null, null, true, function(oData, response) {
        var oPostData = oData;
        delete oPostData.__metadata;

        oPostData.ProductID = Product.ProductID;
        oPostData.ProductName = Product.ProductName;
        oPostData.ProductDescription = Product.ProductDescription;

        oModel.update(sPath, oPostData, null, function(oData, response) {
          oView.byId("prodId").setValue();
          oView.byId("prodName").setValue();
          oView.byId("prodDesc").setValue();
          console.log("Update successfull for Product ID", response.data['ProductID']);
        }, function(e) {
          console.log("Update failed", JSON.stringify(e));
        });

      }, function(e) {
        console.log("Read Error in Update Operation", JSON.stringify(e));
      });
    },
    onDelete: function() {
      var oView = this.getView();
      var oModel = this.getOwnerComponent().getModel("odataModel");

      var oProductDetailPanel = this.getView().byId("prodDetailsPanel");

      console.log("Check this", oProductDetailPanel.getElementBinding("odataModel"));
      var sPath = oProductDetailPanel.getElementBinding("odataModel").sPath;
      oModel.remove(sPath, null, function(oData, response) {
        oView.byId("prodId").setValue();
        oView.byId("prodName").setValue();
        oView.byId("prodDesc").setValue();
        console.log("Delete successfull", response);
      }, function(e) {
        console.log("Delete failed", JSON.stringify(e));
      });
    },
    formatValue: function(data) {
      console.log("We are in Formatter method", data);
      return data;
    },
    formatSome: function(data) {
      console.log("We are in Formatter Some method", data);
      return data;
    },
    onFilter: function(oEvent) {
      console.log("Search event triggered",	oEvent.getParameters().query);
      var aFilter = [];
      var sString = oEvent.getParameters().query;
      if (sString) {
      aFilter.push(new sap.ui.model.Filter({
        path: "ProductName",
        operator: sap.ui.model.FilterOperator.Contains,
        value1: sString
      }));
      console.log("Filter is", aFilter);
      }
      var oList = this.getView().byId("idList");
      var oBinding = oList.getBinding("items");
      console.log("Binding", oBinding);
      oBinding.filter(aFilter);
    }
  });
});