Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

Former Member
‎2012 Sep 06 7:02 AM
20,204

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
Labels in this area
Popular Blog Posts