Skip to Content
SAP HANA

Creating SAP UI5 application on the top of HANA

Scenario: Create a UI5 Application using Shell with two tabs. The data is fetched from the HANA server.

Assumption: The HANA server is available for access from HANA studio with valid credentials. The SAP libraries are imported in the system.

Database: SAP HANA

Tool Used: HANA Studio

Steps involved for the creation of the application:

  • 1. Open HANA Studio.
  • 2. Go to SAP HANA systems tab on the left hand side and add the system. For example ND7 in below example. Enter the Host, Instance, Username and password.
  • 3. Go to SAP HANA Repository tab and right click->create repository workspace.
  • Give a name say “HanaRepository”.
  • 4. Go to project explorer tab->New->Project->XSProject->Give name say “HanaShell”.
  • 5. Right click on “HanaShell”->Team->Share Project->Choose Repository “HanaRepository”.
  • 6. Save and Activate.
  • 7. Right click on the project HanaShell->New->File.
  • 8. Create file with name “.xsaccess(this is for UI access).

  Write the code:

{

"exposed" : true,

"authentication" : [{"method" : "LogonTicket"}, {"method" : "Basic"}]

}

Save and Activate.

  • 9. Create file with name “.xsapp”, Save and activate.
  • 10. Create file with name “.xsprivileges”. Write code:

{

        "privileges":[

                                        {

"name":"Basic",

"description":"Basic user privileges"

                                        },

                                        {

                                        "name":"Admin",

"description":"Administrative privileges"

                                        }

                                ]

}

Save and activate.

  • 11. Right click on “HanaShell” in project explorer->New->Folder

               Name it say “data”(for data from HANA server).

  • 12.Right click->create file->myuser.hdbschema, write the code:


Code:

schema_name = "myuser";

Save and activate.

  • 13. Go to SAP HANA systems tab->expand “Catalog”->expand the schema name. Here it is “myuser”.
  • 14. Right click on the tables->New Table->Provide Table name say “user”. Enter the field name, data type and other required details.

Save and activate.

  • 15. Right click on the table name “user”->Generate->Insert Statement. Enter the values. The values can be loaded from the excel file as well.

Save and activate.

  • 16. Go to the project explorer tab->Right click on “HanaShell”->New->folder->Name it as “service”(to get data from HANA to UI).
  • 17. Right click “service”->New->file->Give filename as “user.xsodata”. Write code:

Code:

service {

"myuser"."user" as "user";

}

Save and activate.

  • 18. Right click on “HanaShell->New->folder->ui. Right click on ui->New->project->SAP UI5 Application Development->”Application Project”. Give name say “shellhana”.
  • 19. Create view->”shell”->write the code:
  1. sap.ui.jsview("shellhana.shell", {

       /** 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 shellhana.shell

       */

       getControllerName : function() {

              return "shellhana.shell";

       },

       /** 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 shellhana.shell

       */

       createContent : function(oController) {

            

              var oShell = new sap.ui.ux3.Shell({

            showLogoutButton: true,

            showSearchTool: true,

            showInspectorTool: true,

            showFeederTool: true,

            id:this.createId("main-shell"),

            appTitle:"TEST APPLICATION",

worksetItemSelected:[oController.onWorksetItemSelectd,oController],

              headerItems: [  new sap.ui.commons.Button({text:"Personalize",tooltip:"Personalize",

                press:function(oEvent){alert("Here could open an personalize dialog");}}),

new sap.ui.commons.MenuButton({

text: "Help",

tooltip: "Help Menu",

                                                                             menu: new sap.ui.commons.Menu("menu1",{items:[

new sap.ui.commons.MenuItem("menuitem1",{text:"Help"}),

                                                                                     new sap.ui.commons.MenuItem("menuitem3",{text:"About"})]})

})],

          logout:function(oEvent){

                alert("closing window");

                open(location, '_self').close();

          }

     });

              return oShell;

       }

});

  •   20. Write the code in the controller for view “shell”:
  1. sap.ui.controller("shellhana.shell", {

/**

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

*/

       onInit: function() {

              var oShell = this.byId("main-shell");

      

        oShell.addWorksetItem(new sap.ui.ux3.NavigationItem({

               key:"home",

               text:"Home"

        }));

    

        oShell.addWorksetItem(new sap.ui.ux3.NavigationItem({

               key:"table",

               text:"Table"

        }));

      

        this._mContent ={};

      

        this._mContent.home=sap.ui.jsview("shellhana.home");

        this._mContent.table=sap.ui.jsview("shellhana.table");

     

                            oShell.setContent(this._mContent.home);

},

onWorksetItemSelectd: function(oEvent){        

        var oShell = this.byId("main-shell");

        var sKey = oEvent.getParameter("key");

        oShell.setContent(this._mContent[sKey]);

}

/**

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

*/

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

*/

//     onAfterRendering: function() {

//

//     },

/**

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

* @memberOf shellhana.shell

*/

//     onExit: function() {

//

//     }

});

  • 21. Write the code in the  for view “home”:
  1. sap.ui.jsview("shellhana.home", {

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

       */

       getControllerName : function() {

              return "shellhana.home";

       },

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

       */

       createContent : function(oController) {

              var oButton = new sap.ui.commons.Button("mybt", {text: "Click Me",

                     press: function(oEvent){

                           alert("Welcome to UI5 test application :-)");

                     }});

              return oButton;

       }

});

22. Write the code for view “table”:

  1. sap.ui.jsview("shellhana.table", {

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

       */

       getControllerName : function() {

              return "shellhana.table";

       },

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

       */

       createContent : function(oController) {

              var oModel = new sap.ui.model.odata.ODataModel('/HanaShell/service/user.xsodata', false);

              var oTable = new sap.ui.table.Table("user", {visibleRowCount: 5});

              oControl = new sap.ui.commons.TextField().bindProperty("value","id");

              oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:"User ID"}),

                     template: oControl, sortProperty: "id"}));

              oControl = new sap.ui.commons.TextField().bindProperty("value","name");

              oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:"First Name"}),

              template: oControl, sortProperty: "name"}));

              oControl = new sap.ui.commons.TextField().bindProperty("value","age");

              oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:"Age"}),

              template: oControl, sortProperty: "age"}));

              oTable.setModel(oModel);

              var sort1 = new sap.ui.model.Sorter("id");

              oTable.bindRows("/user",sort1);

              oTable.setTitle("ALL USER LIST");

              return oTable;

       }

});

  • 23. Write the code in the index.html as:

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

              <script src="/sap/ui5/1/resources/sap-ui-core.js"

                           id="sap-ui-bootstrap"

                           data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"

                           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("shellhana");

                           var view = sap.ui.view({id:"idshell1", viewName:"shellhana.shell", type:sap.ui.core.mvc.ViewType.JS});

                           view.placeAt("content");

              </script>

       </head>

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

              <div id="content"></div>

       </body>

</html>

24. Open the web browser, here it is Google chrome:

Enter the URL: http://inblrll1021.dhcp.blrl.sap.corp:8000/HanaShell/ui/shellhana/WebContent/index.html

Here host name:  http://inblrll1021.dhcp.blrl.sap.corp

Port Number: 80

Instance Number: 00

Rest of the URL contains the path of the index file.

25.  Press enter after entering the URL. The output is shown as below:

On clicking “Ok”, the tab will be closed.

Result: The data is fetched from HANA database and is shown on the tab “Table”.

Former Member