Skip to Content
Technical Articles

SAP UI5 app on SAP HANA Cloud Trial Service

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.

Schema:

Table: 

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:

index.html

<!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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                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.app = {};
            sap.ui.getCore().attachInit(function(){
                new sap.ui.core.ComponentContainer({
                   height : "100%",
                   name : "demo.hana.content.epm.uidemo"
                }).placeAt('content'); 
            });
        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

Component.js:

jQuery.sap.declare("demo.hana.content.epm.uidemo.Component");

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

Manifest.json:

Main.view.xml

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

Main.controller.js

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);
	}
});

Output:

Thank you all for your stand till the blog ends 🙂

Please line up comments if any.

BR//Dhanasupriya Sidagam

Be the first to leave a comment
You must be Logged on to comment or reply to a post.