Skip to Content

Hi All,

Just happened to try some hands on SAPUI5. Created a simple SAPUI5 application which just fetches data from public OData service Northwind into a table.

The given application can be used as a starting point to anyone who wants to have a feel of the new framework.

After due diligence, setting up the development environment. Just launched myself onto creating the application. I am pasting the source code for cross reference.

index.html

**********************

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

  </script>

  <!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui-libs’ if required –>

  <script>

  sap.ui.localResources(“test16feb”);

  var view = sap.ui.view({id:”idTest16feb1″, viewName:”test16feb.Test16feb”, type:sap.ui.core.mvc.ViewType.JS});

  view.placeAt(“content”);

  </script>

  </head>

  <body class=”sapUiBody” role=”application”>

  <div id=”content”></div>

  </body>

</html>

*******************************

Controller.js

*****************************

sap.ui.controller(“test16feb.Test16feb”, {

/**

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

* @memberOf test16feb.Test16feb

*/

onInit: function() {

   var oModelObject = new sap.ui.model.json.JSONModel(); 

      var url = “http://services.odata.org/Northwind/Northwind.svc/Order_Details_Extendeds?$format=json“; 

      oModelObject.loadData(url); 

      sap.ui.getCore().getElementById(“testTbl”).setModel(oModelObject); 

//

  },

/**

* 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!).

* @memberOf test16feb.Test16feb

*/

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

* @memberOf test16feb.Test16feb

*/

//onAfterRendering: function() {

//

  },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

* @memberOf test16feb.Test16feb

*/

// onExit: function() {

//

// }

});

***************************************

View.js

************************************

sap.ui.jsview(“test16feb.Test16feb”, {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

  * @memberOf test16feb.Test16feb

  */

  getControllerName : function() {

  return “test16feb.Test16feb”;

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf test16feb.Test16feb

  */

  createContent : function(oController) {

  // Create layout where UI control will be placed 

        var layout = new sap.ui.commons.layout.MatrixLayout(‘layout’);    

        layout.setWidth(‘100%’); 

     

        // Create table UI 

        var oTable = new sap.ui.table.Table(“testTbl”); 

        oTable.addColumn(new sap.ui.table.Column({   

        label: new sap.ui.commons.Label({text: “OrderID”}),     

                    template: new sap.ui.commons.TextView().bindProperty(“text”, “OrderID”)  

        } 

            )); 

        oTable.addColumn(new sap.ui.table.Column({   

  label: new sap.ui.commons.Label({text: “ProductID”}),     

            template: new sap.ui.commons.TextView().bindProperty(“text”, “ProductID”)  

  } 

     )); 

        oTable.addColumn(new sap.ui.table.Column({   

  label: new sap.ui.commons.Label({text: “ProductName”}),     

            template: new sap.ui.commons.TextView().bindProperty(“text”, “ProductName”)  

  } 

        )); 

        // Data binding into table 

        oTable.bindRows(“/value”); 

        oTable.invalidate(); 

        layout.createRow(oTable); 

        this.addContent(layout);      

         

  }

});

*******************************************

The result:

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