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:
- 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”:
- 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”:
- 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”:
- 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”.
