Thursday, 03 October 2019 10:35

SAP UI5 app on SAP HANA Cloud Trial Service

Written by
Rate this item
(0 votes)

Hello All

I just explored the SAP HANA service available in SAP cloud platform. Got to know many gears and finally came up with this noisy blog.

Below are the footsteps

to chase UI5 app development in SAP HANA service provider.

1. As regular, we need to make sure that SAP HANA service is enabled.

2. Please add DB/Schema ID and then click on it. We will be put down to below screen.

3. Navigate to Development Tools: SAP HANA Web-Based Development Workbench. Make the User name as: SYSTEM and password you have entered while creating DB/Schema ID.

4. Will be landed to below page. Here Editor is to code and Catalog is to maintain data for tables or whatever we have created during our project.

5. Project structure for my demo. Included both xsodata and ui changes. Also need to maintain roles for schema and tables constructed.

Below are the files in which changes has been done.



XSOData Service: 

Once i run this service, below is the response shown.

Inserted this data into table by using Catalog in SAP HANA Web-Based Development Workbench

After service creation, went on with UI5 app development.

UI changes made:


<!DOCTYPE HTML> <html> <head> <title>SAP HANA/UI5 DEMO</title> <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="/index.css"> <script src="" data-sap-ui-libs="sap.m,sap.ui.integration" data-sap-ui-theme="sap_fiori_3" data-sap-ui-resourceroots='{"demo.hana.content.epm.uidemo" : "./"}'> </script> <script> sap.isSingle = false; = {}; sap.ui.getCore().attachInit(function(){ new sap.ui.core.ComponentContainer({ height : "100%", name : "demo.hana.content.epm.uidemo" }).placeAt('content'); }); </script> </head> <body role="application"> <div></div> </body> </html>

Component.js:"demo.hana.content.epm.uidemo.Component"); sap.ui.core.UIComponent.extend("demo.hana.content.epm.uidemo.Component", { metadata: { manifest: "json" } });



<sap.ui.core.mvc:View controllerName="demo.hana.content.epm.uidemo.view.Main" xmlns:sap.ui.core.mvc="sap.ui.core.mvc" xmlns="sap.m"> <Shell> <List headerText="Students Info" items="{/StudentDetailTable}"> <items> <StandardListItem title="{STUDENTNAME}" info="{STUDENTSUBJECT}" description="{STUDENTMOBILENUM}" infoState="Success"/> </items> </List> </Shell> </sap.ui.core.mvc:View>


sap.ui.controller("demo.hana.content.epm.uidemo.view.Main", { onInit: function() { var oModel = new sap.ui.model.odata.ODataModel("/demo/hana/content/epm/services/studentInfo.xsodata", true); this.getView().setModel(oModel); } });


Thank you all for your stand till the blog ends ?

Please line up comments if any.

BR//Dhanasupriya Sidagam

Read 164 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.