Skip to Content

How to consume Sales Order Demo Gateway using ODataModel and display using SAP UI5 views

Now, you can use SDN’s Demo Gateway to build a Sample Sales Order application using SAP UI5 Views. Below is the snapshot of the view.

SDN Gateway URL : http://scn.sap.com/docs/DOC-31221

Below are the steps to built the application.

Prerequisite to built an application are:

  1. SAP UI 5 Plugin installed in your eclipse.
  2. Tomcat 6.x version.
  3. Java 1.6 or greater versions.

Steps:

  1. Create a new application, File -> Others -> SAPUI5 Application Development and name it as “SalesOrderService“.

2. Copy below HTML code in index.html file.


<!DOCTYPE HTML>
<html>
       <head>
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                 <script src="resources/sap-ui-core.js"
                      id="sap-ui-bootstrap"
                      data-sap-ui-libs="sap.ui.commons, sap.ui.table"
                      data-sap-ui-theme="sap_platinum" >
                 </script>
              <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
                   <script>
                     sap.ui.localResources("salesorderservice");
                     var view = sap.ui.view({id:"idsalesOrderService1", viewName:"salesorderservice.retriveOrder", type:sap.ui.core.mvc.ViewType.JS});
                        view.placeAt("content");
                 </script>
       </head>
       <body class="sapUiBody" role="application">
              <div id="content"></div>
              <div id="rContent" style="width:80%"></div>
       </body>
</html>

3. Copy Below code in your View file “retriveOrder.view.js”.


sap.ui.jsview("salesorderservice.retriveOrder", {
      getControllerName : function() {
         return "salesorderservice.retriveOrder";
      },
      createContent : function(oController) {
          var layout = new sap.ui.commons.layout.MatrixLayout('layout');
          layout.setWidth('80%');
           // Search Box starts here
          var searchPannel = new sap.ui.commons.Panel('searchPannel');
          var sTitle = new sap.ui.commons.Title('sTitle');
          sTitle.setText('Search Order ID');
          searchPannel.setTitle(sTitle);
          var sLayout = new sap.ui.commons.layout.MatrixLayout('sLayout');
          sLayout.setWidth('50%');
          var lb_search = new sap.ui.commons.Label('lb_search');
          lb_search.setText("Order ID:");
          var txt_search = new sap.ui.commons.TextField('txt_search');
          txt_search.setTooltip('Please provide Order id!..');
          var btn_search = new sap.ui.commons.Button("btn_search");
          btn_search.setText("Search");
          btn_search.attachPress(oController.searchAction);
          sLayout.createRow(lb_search, txt_search, btn_search);
          searchPannel.addContent(sLayout);
          layout.createRow(searchPannel);
        // Search Box starts here 
        // Result Box starts here 
          var resultPannel = new sap.ui.commons.Panel('resultPannel');
          var rTitle = new sap.ui.commons.Title('rTitle');
          rTitle.setText('All - Sales Order');
          resultPannel.setTitle(rTitle);
          var oTable = new sap.ui.table.DataTable();
            oTable.addColumn(new sap.ui.table.Column({         label: new sap.ui.commons.Label({text: "OrderId"}),                template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"),                sortProperty: "OrderId"    }));
            oTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Description"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Description"),      sortProperty: "Description"    }));
            oTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Quantity"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"),      sortProperty: "Quantity"    }));
            oTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Value"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Value"),      sortProperty: "Value"    }));
            var oModel = new sap.ui.model.odata.ODataModel("http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS");
            oTable.setModel(oModel);
            oTable.bindRows("SOItems");
            var salesResultPanel, oTitle, rModel;
            var rTable = new sap.ui.table.DataTable();
              rTable.addColumn(new sap.ui.table.Column({         label: new sap.ui.commons.Label({text: "OrderId"}),                template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"),                sortProperty: "OrderId"    }));
              rTable.addColumn(new sap.ui.table.Column({         label: new sap.ui.commons.Label({text: "Item"}),                template: new sap.ui.commons.TextField().bindProperty("value", "Item"),                sortProperty: "Item"    }));
              rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Description"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Description"),      sortProperty: "Description"    }));
              rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Plant"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Plant"),      sortProperty: "Plant"    }));
              rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Quantity"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"),      sortProperty: "Quantity"    }));
              rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "UoM"}),      template: new sap.ui.commons.TextField().bindProperty("value", "UoM"),      sortProperty: "UoM"    }));
              rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Value"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Value"),      sortProperty: "Value"    }));
              rTable.setVisibleRowCount(10);
              salesResultPanel = new sap.ui.commons.Panel('salesResultPanel');
              oTitle = new sap.ui.commons.Title('oTitle'); 
             oTable.attachRowSelect(function(oEvent)
                     {
                         document.getElementById('rContent').innerHTML = "";
                        var currentRowContext = oEvent.getParameter("rowContext");
                        var OrderId = oModel.getProperty("OrderId", currentRowContext);
                        var url = "http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
                        oTitle.setText('Sales Order Details - '+OrderId); 
                            salesResultPanel.setTitle(oTitle); 
                        rModel = new sap.ui.model.odata.ODataModel(url);
                        rTable.setModel(rModel);
                        rTable.bindRows("SOItems");
                        salesResultPanel.addContent(rTable);
                        salesResultPanel.placeAt('rContent');
                        rModel = null;
                     });
          resultPannel.addContent(oTable);
          layout.createRow(resultPannel);
        // Result Box ends here
          layout.placeAt('content');
      }
});

3. Copy below code into your Controller file “retriveOrder.controller.js”


sap.ui.controller("salesorderservice.retriveOrder", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
*/
//   onInit: function() {
//
//   },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
*/
//   onBeforeRendering: function() {
//
//   },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
*/
//   onAfterRendering: function() {
//
//   },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
*/
//   onExit: function() {
//
//   }
    searchAction: function(){
        var OrderId = $("#txt_search").val();
        alert('searchKey-->'+OrderId);
        var salesResultPanel, oTitle, rModel;
        var rTable = new sap.ui.table.DataTable();
          rTable.addColumn(new sap.ui.table.Column({         label: new sap.ui.commons.Label({text: "OrderId"}),                template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"),                sortProperty: "OrderId"    }));
          rTable.addColumn(new sap.ui.table.Column({         label: new sap.ui.commons.Label({text: "Item"}),                template: new sap.ui.commons.TextField().bindProperty("value", "Item"),                sortProperty: "Item"    }));
          rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Description"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Description"),      sortProperty: "Description"    }));
          rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Plant"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Plant"),      sortProperty: "Plant"    }));
          rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Quantity"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"),      sortProperty: "Quantity"    }));
          rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "UoM"}),      template: new sap.ui.commons.TextField().bindProperty("value", "UoM"),      sortProperty: "UoM"    }));
          rTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Value"}),      template: new sap.ui.commons.TextField().bindProperty("value", "Value"),      sortProperty: "Value"    }));
          rTable.setVisibleRowCount(10);
          salesResultPanel = new sap.ui.commons.Panel('salesResultPanel_'+OrderId);
          oTitle = new sap.ui.commons.Title('oTitle_'+OrderId); 
             document.getElementById('rContent').innerHTML = "";
               var url = "http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
               alert(url);
            oTitle.setText('Sales Order Details - '+OrderId); 
              salesResultPanel.setTitle(oTitle); 
            rModel = new sap.ui.model.odata.ODataModel(url);
            rTable.setModel(rModel);
            rTable.bindRows("SOItems");
            salesResultPanel.addContent(rTable);
            salesResultPanel.placeAt('rContent');
            rModel = null;
    }
});

4. Final structure of the Project would be as below.

5. Now launch your application in browser http://localhost:8080/SalesOrderService/ and prompts for a Username & Password. Enter them which is provided as in the Demo Gateway . URL : http://scn.sap.com/docs/DOC-31221

22 Comments
You must be Logged on to comment or reply to a post.