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.
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:
No comments:
Post a Comment