Skip to Content

This blog will help you to write a SAPUI5 based application which can be put on a server and accessed via browsers. It covers setting up of the development environment and points to some debugging capabilities. The described code uses the RMTSAMPLEFLIGHT service on the SAP NetWeaver Gateway and shows how to do CURD operations on it using x-csrf-token.

Prerequisites

  • Eclipse

          Version used for this code

       Version: Juno Service Release 2

       Build id: 20130225-0426


  • Download Evaluation Package for UI Development Toolkit for HTML5 from

          http://scn.sap.com/community/developer-center/front-end?rid=/webcontent/uuid/20a34ae7-762d-2f10-c994-db2e898d5f70

  • Apache-tomcat-7
  • Google Chrome

After the download of UI toolkit is complete, unzip and open \HTML5Evaluation_complete_1.12.1\Readme_and_InstallationInformation.html, here look for “SAPUI5 Application Development Tool”. This section has the details of importing the UI toolkit to eclipse.

Next, configure eclipse to launch the application on Apache tomcat.

In Eclipse go to Window -> Preferences -> Server -> Runtime environments  then click the add button and select the correct Apache version and provide the location of the server.

Apache.png

Enable cross site in Chrome by

  1. Create another shortcut of Chrome.
  2. Right click on this new shortcut and click on “properties”
  3. Change the target by adding the following parameters to it

        EX: “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –args –disable-web-security –ignore-certificate-errors –allow-running-insecure

/wp-content/uploads/2013/07/chrome_244682.png

This completes all the configuration part. Now we can create the project by selecting File -> New -> Other

Then go to SAPUI5 Application Development and select Application Development.

eclipsePro.png

In the WebContent folder of the project open index.html and replace the code in it with the code from below.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>SAP OData in SAPUI5 </title>

  <!-- Load SAPUI5, select theme and control library -->

 
  <script src="resources/sap-ui-core.js"
   id="sap-ui-bootstrap"
    type="text/javascript"
    data-sap-ui-theme="sap_platinum"
    data-sap-ui-libs="sap.ui.commons,sap.ui.table"></script>

  <script>

  function actionontable(action,kstring,oEntry){
  
    oModel.refreshSecurityToken(null, null, false) ;//prevents the xsrf token from getting expired.
    oModel.read(kstring, null, null, true, function(oData, oResponse){
    var oParams = {};
       oParams.fnSuccess = function(){ alert(action+" successful");};
       oParams.fnError = function(){alert(action+" failed");};
      oModel.oHeaders["x-csrf-token"] = oResponse.headers['x-csrf-token'];
     
     
       if(action=="Update")
       oModel.update(kstring, oEntry, oParams);
       else if (action=="Delete")
        oModel.remove(kstring, oParams);
       else if (action=="Create"){
     var oModel2 = new sap.ui.model.odata.ODataModel("https://ldcigiq.wdf.sap.corp:44315/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT");
     oModel2.oHeaders["x-csrf-token"] = oResponse.headers['x-csrf-token'];
       oModel2.create(kstring, oEntry, null, function(){
               alert("Create successful");
               oModel.refresh();
           },function(){
               alert("Create failed");});
    }

       else
        alert ("Action not known");
      
    },function(){
      alert("xcsrf Read failed");});
  };
 
  function updater(oTable) {
  
  var oDialog1 = new sap.ui.commons.Dialog();
  oDialog1.setTitle("Update Dialog");
  var ustring = oTable.getContextByIndex(oTable.getSelectedIndices());
  var kstring = escape(ustring).replace("%28%27","(\'").replace("%27%29","\')");
  var binstring = "{"+ustring+"/NAME}";
  
  var oLabel = new sap.ui.commons.Label({text: "Name"});
  var oTextField = new sap.ui.commons.TextField({
      value: binstring
  });
 
  oDialog1.addContent(oLabel);
  oDialog1.addContent(oTextField);
 
  oDialog1.addButton(new sap.ui.commons.Button({text: "Update", press:function(){ var oEntry = {};
        oEntry.agencynum = oModel.getProperty('agencynum',ustring,null);
        oEntry.NAME = oTextField.getValue();
       
   actionontable("Update",kstring,oEntry);
   oDialog1.close();}}));
 
  oDialog1.addButton(new sap.ui.commons.Button({text: "Calcel", press:function(){oDialog1.close();}}));
 
  oDialog1.open();
};

function deleter(oTable) {
   
  var oDialog1 = new sap.ui.commons.Dialog();
  oDialog1.setTitle("Delete Dialog");
  var ustring = oTable.getContextByIndex(oTable.getSelectedIndices());
  var kstring = escape(ustring).replace("%28%27","(\'").replace("%27%29","\')");

  var agencynum = oModel.getProperty('agencynum',ustring,null);
        var oTextLabel = new sap.ui.commons.Label({
      text: "Delete Record with Agency# "+agencynum
  });
 
       
  oDialog1.addContent(oTextLabel);
 
 
  oDialog1.addButton(new sap.ui.commons.Button({text: "Delete", press:function(){
       
       
   actionontable("Delete",kstring,null);
   oDialog1.close();}}));
 
  oDialog1.addButton(new sap.ui.commons.Button({text: "Calcel", press:function(){oDialog1.close();}}));
 
  oDialog1.open();
};
  function creater(oTable) {
   
   var oDialog1 = new sap.ui.commons.Dialog();
   oDialog1.setTitle("Create Dialog");
   var ustring = oTable.getContextByIndex(oTable.getSelectedIndices());
  
   var oLabelAgency = new sap.ui.commons.Label({text: "Agency#"});
   var oLabel = new sap.ui.commons.Label({text: "Name"});
   var oTextField = new sap.ui.commons.TextField();
   var oTextFieldAgency = new sap.ui.commons.TextField();
  
   /*oDialog1.addContent(oLabelAgency);
   oDialog1.addContent(oTextFieldAgency);
   oDialog1.addContent(oLabel);
   oDialog1.addContent(oTextField);*/
  
   var oMatrix = new sap.ui.commons.layout.MatrixLayout();
   oMatrix.createRow(oLabelAgency, oTextFieldAgency);
   oMatrix.createRow(oLabel, oTextField);
   oDialog1.addContent(oMatrix);
  
   oDialog1.addButton(new sap.ui.commons.Button({text: "Create", press:function(){
    var oEntry = {};
          oEntry.agencynum = oTextFieldAgency.getValue();
          oEntry.NAME = oTextField.getValue();
    actionontable("Create","/TravelagencyCollection",oEntry);
    oDialog1.close();
    }}));
  
   oDialog1.addButton(new sap.ui.commons.Button({text: "Calcel", press:function(){oDialog1.close();}}));
  
   oDialog1.open();
  };

  var oModel = new sap.ui.model.odata.ODataModel("http://ldcigiq.wdf.sap.corp:50015/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT");
   sap.ui.getCore().setModel(oModel); // required to get the data in the textbox
    var oTable = new sap.ui.table.Table({selectionMode: sap.ui.table.SelectionMode.Single,
     title: "RMTSAMPLEFLIGHT/TravelagencyCollection",
     toolbar: new sap.ui.commons.Toolbar({items: [
               new sap.ui.commons.Button({text: "Update", press: function(){updater(oTable);}}),
                 new sap.ui.commons.Button({text: "Create", press: function(){creater(oTable);}}),
                 new sap.ui.commons.Button({text: "Delete", press: function(){deleter(oTable);}})]})
     });
 
     oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "NAME"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "NAME"),
        sortProperty: "NAME",
     filterProperty: "NAME",
     width: "100px"

      }));

      oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "COUNTRY"}),
        template: new sap.ui.commons.TextField().bindProperty("value", "COUNTRY"),
        sortProperty: "COUNTRY",
     filterProperty: "COUNTRY",
     width: "100px"
      }));

        oTable.setModel(oModel);
        oTable.bindRows("/TravelagencyCollection");
      //oTable.sort(oTable.getColumns()[0]);
       oTable.placeAt("dataTable");

     </script>

</head>
<body class="sapUiBody">
  <h1>SAP OData in SAPUI5 </h1>
  <div id="dataTable"></div>
</body>
</html>

This code when run creates a table with 2 columns, there are 3 buttons (Update, Create and Delete)

/wp-content/uploads/2013/07/app_245310.png

When one of the rows is selected and any of the buttons clicked, the selected element is picked up by the code below.

oTable.getContextByIndex(oTable.getSelectedIndices()) gets the exact element selected. EX: /TravelagencyCollection(‘00000007’)

Now we can get the value of a particular property of this element with the below code

var agencynum = oModel.getProperty(‘agencynum’,ustring,null);

Here ustring is /TravelagencyCollection(‘00000007’)

On clicking the update button a Dialog box pops up with a prefilled text field

/wp-content/uploads/2013/07/update2_245335.png

The below code shows how to get the text field prefilled.

var oTextField = new sap.ui.commons.TextField({

                        value: binstring

                    });

Where binstring has a value as {/TravelagencyCollection(‘00000007’)/NAME} so that the text field gets populated with the value of property “NAME” of the particular element 00000007

But this code prefills the text field only if the below code is called after the model is declared.

sap.ui.getCore().setModel(oModel);


A Model.read operation is carried before update/create/delete to get the x-csrf-token. Also a Model.refreshSecurityToken call is made to prevent the x-csrf-token from getting expired.

To test the code run it on tomcat

/wp-content/uploads/2013/07/run_245356.png

And then launch http://localhost:8080/Test/index.html in Chrome. The advantage with chrome is that it has a very good debugging capability, to learn more about this check https://developers.google.com/chrome-developer-tools/


Some of the helpful links are:

http://scn.sap.com/people/dj.adams/blog/2012/02/13/sapui5-says-hello-odata-to-netweaver-gateway

http://scn.sap.com/docs/DOC-31625

Hope this blog provides some help while developing SAPUI5 applications.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply