Saturday, 5 October 2019

SAP UI5 app on SAP HANA Cloud Trial Service

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.

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

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

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

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.

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

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

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

Below are the files in which changes has been done.

Schema:

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

Table: 

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

XSOData Service: 

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

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

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

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

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

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:

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

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:

SAP HANA Certifications, SAP HANA Learning, SAP HANA Tutorials and Materials, SAP HANA Cloud, SAP HANA Online Exam

No comments:

Post a Comment