Skip to Content

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

To report this post you need to login first.

22 Comments

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

  1. Lisa Guo

    Hi Sunil Sharma,

    I have all followed your guid in this article.

    But the problem is that there is no data in the table, in other word the table is blank.

    I also got the same situation with others project.

    Some people said it is explorer problem. I also forbidden all sercuirty options of the explorer and still didn’t solve the problem.

    So could offer me help to handle the problem I met?

    That will be very great if u coud give me some guidness.

    (0) 
      1. Lisa Guo

        hi Raul also @ Sunil Sharma

        I have tried your solution ,but it still doesn’t work.

        I followed all the code in this ariticle and my developing environment is as follows:

        1. Eclipse Juno

        2. SAPUI5 eclipse plugin installed

        3. Tomcat in Eclipse

        4. SAPUI5 library

        IE 8 security internet settings is “Low”

        (0) 
    1. Sunil Sharma Post author

      I used IE8 with security internet settings as “Medium” and got the result populated. I too got the same issue with other browser. Try using in the IE8 with above settings.

      (0) 
    1. Sunil Sharma Post author

      Hi Archana,

      Did you get a prompt for Username & Password . If not change your “Local Intranet” settings to Low i.e. IE -> Tools -> Internet Options -> Security -> Local intranet -> Low.

      Thanks

      Sunil

      (0) 
  2. Lucy Liu

    Hi, Assume that I have a service URL of user Information, I can use “oData.read” statement to read user information from DB. Now I want to implement the change user name function.   How can I write the “oData.request” statement to update the information in the DB?Could you give me a short example?Thank you very much!

    (0) 
  3. Ashish Sachdeva

    Hi Sunil,

    I had followed all the steps from this tutorial but still no success , I had got a prompt for user ID and password But still didn’t got Data in Tables.

    Kindly Help

    Thanks and Regards,

    Ashish Sachdeva

    (0) 
  4. kishore m

    Hi Sir,

         I follow the above steps as you mentioned above but running the program getting below errors:

    the table is empty

    QQ截图20121019101118.jpg

    I have tried IE 8 and Chrome, and the results are same

    1. OPTIONShttp://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2/$metadata 401 (Unauthorized) ./resources/sap/ui/thirdparty/datajs.js:17

    XMLHttpRequest cannot loadhttp://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2/$metadata. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

    QQ截图20121019144037.jpg

    It is an Access error.

    So serveral solutions I have tried:

    1. disable the IE 8 or Chrome Internet security

    take Chrom for example

    with the command chrome.exe –disable-web-security

    —–result is still the same empty table

    2. the solution offered by Raul Romero

    add prefix so the code is here

    var url = “/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders(‘”+OrderId+”‘)”;

    but the result is here which means the url is not right

    GEThttp://localhost:8080/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/$metadata404 (Not Found)

    /wp-content/uploads/2013/05/111_148081.jpg

    (0) 
  5. reda miraoui

    Hi Sunil,

    thanks for the blog really helpfull , on the other hand we created a odata service based on BEX easy query , my problem is i want to filter  a RowId ( similar) to OrderID , i ahve no problem population the oTable , but when it comes to results i have no data and i know the problem is how to bind the databack after adding the RowID (OrderID ) , i see that you use  SOitems , but i wonder how to works for you cause i ve been doing almost the same as you did but the result table never shows data, in other words whats the relation between SOHeaders and SOItems and how if i want to bind back to SOHeaders, is it possible and if not why ?


    PS: I spent so much time on this i would really appreciate any help

    Best Regards

    Reda

    (0) 
  6. reda miraoui

    Hi Sunil,


    I have a more important question, when i try to query my odata service i get the following response,


    System query options ‘$orderby,$skip,$top,$skiptoken,$inlinecount,’ are not allowed in the requested URI


    Ps: the Odata service was created based on a Bex easy query


    Best Regards

    REda


    (0) 
  7. Swetha Suryanarayanan

    Hi Sunil,

    I tried the same, the table displayed contains no-data. I’m working in Eclipse Kepler with SAPUI5 tools installed in it. I tried running it in HANA SDK local runtime and Chrome.

    What might be the problem?

    Please guide me through this.

    Regards,

    Swetha

    (0) 

Leave a Reply