Skip to Content

I have been searching a lot for a concrete document which has the steps of configuring a generic ODATA service on internet (here in our case it is

https://companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/)

But have been able to get it in parts. So once I have implemented it successfully i wanted to put all those together.

So lets start.
Intially, when we have a SAPUI5
Project which uses a generic Odata service somewhat in this way:

model creation

  var oModel = new sap.ui.model.odata.ODataModel(proxy/https/companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/, false);

sap.ui.getCore().setModel(oModel);

Now If you push this app to your HANA cloud account it would throw an error for obvious reasons. So you have to set up things on the cloud in such a way
that the your application would be able to fetch data from the above mentioned odata service.

The Configuration to be done are:

Configurations

1. Creating  a destination to the odata service from SAP HANA Cloud.

2. Adding  a file called “neo-app.json” to your project so that the name of the destination gets mapped.

So firstly lets go to our SAP HANA Cloud account. Create a new application under HTML5 Applications .

/wp-content/uploads/2014/11/chrome_581056.jpg

Enter the Name of the application for example <apponcloud>. Now click on it and go to the Development Tab to pick the Git Repository Url for cloning the repository to the local system.

/wp-content/uploads/2014/11/chrome_581056.jpg

Open Eclipse go to the  “GIT Repositories” View and click on “Clone a Git Repository.” Paste the url copied a in dialog box which pops up. Also
give the credentials of the SAP HANA Cloud Account and finish.

/wp-content/uploads/2014/11/chrome1_581128.jpg

Now you would see the the application directory in GIT Repository View as shown above. Then right click on the repository<apponcloud> and “Import
Projects” then select the option “Import as general project” as shown below then give a name and finish.

/wp-content/uploads/2014/11/chrome2_581129.jpg

You would notice that in the “Project Explorer” a project named <apponcloud> appears.Till now we have only got the ground ready for our development.

Lets add a bit colour to our project. Right click on the project on the “Project Explorer” add a new file named “index.html”.

Now add the following code to index.html:

——————————————————————————————————————————

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=“X-UA-Compatible” content=“IE=edge” />

<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8” />

<title>SAP HANA CLOUD</title>

<!–replace “server” and “port” with your local installation or use https://sapui5.hana.ondemand.com–>

<script src=https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

id=“sap-ui-bootstrap” data-sap-ui-libs=“sap.m” data-sap-ui-theme=“sap_bluecrystal”>

</script>

<!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>

<script>

var oModel = new sap.ui.model.odata.ODataModel(“proxy/https/companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/”,false);

sap.ui.getCore().setModel(oModel);

  var app = new sap.m.App(“myApp”, {

             initialPage: “page1”

       });

       var oPage = new sap.m.Page(“page1”, {

             title: “Company List”

       });

       var oTable = new sap.m.Table({

             id: “Company”,

             mode: sap.m.ListMode.None,

             columns: [

             new sap.m.Column({

                    width: “1em”,

                    header: new sap.m.Label({

                           text: “ID”

                    })

             }),new sap.m.Column({

                    width: “1em”,

                    header: new sap.m.Label({

                           text: “Company Id”

                    })

             }),new sap.m.Column({

                    width: “1em”,

                      header: new sap.m.Label({

                           text: “First Name”

                    })

             }),new sap.m.Column({

                    width: “1em”,

                      header: new sap.m.Label({

                           text: “Last Name”

                    })

             })

             ]

       });

       var template = new
sap.m.ColumnListItem({

             id: “first_template”,

             type: “Navigation”,

            visible: true,

             selected: true,

            cells: [ new sap.m.Label({

                    text: “{Id}”

             }),new sap.m.Label({

                    text: “{CompanyId}”

             }),new sap.m.Label({

                    text: “{FirstName}”

             }),new sap.m.Label({

                    text: “{LastName}”

             })

             ]

       });

       oTable.bindItems(“/Employees”, template);

       oPage.addContent(oTable);

         app.addPage(oPage);// add page to the App

       app.placeAt(“content”); // place the App into the HTML document

</script>

   </head>

<body class=“sapUiBody”>

       <div id=“content”></div>

  </body>

</html>

——————————————————————————————————————-

Had this file been tested locally the output would be something like this.

/wp-content/uploads/2014/11/chrome3_581130.jpg

Now push the changes in project to the cloud account. Create a version and activate it. Now test your app you would get the following error.

/wp-content/uploads/2014/11/chrome4_581132.jpg

This is where we should do our bit. As said previously we need to create a destination from our SAP HANA Cloud Account.

/wp-content/uploads/2014/11/chrome5_581133.jpg

Click on the Destinations tab and then click on “New Destination”. Fill in the given details.

Name= cloudbackend

Type= HTTP

URL= https://companylistdemo.hana.ondemand.com

ProxyType= Internet

CloudConnectorVersion= 2

Authentication= NoAuthentication

————————————————————-

WebIDEEnabled= true

WebIDESystem= cloudbackend

WebIDEUsage= odata_gen

/wp-content/uploads/2014/11/chrome6_581139.jpg

Now our Second part. Lets go back to the project<apponcloud> in the Project Explorer of Eclipse and add an new file named “neo-app.json”.
Paste the following code in the neo-app.json file.

—————————————————————-

{


“welcomeFile”: “index.html”,


“routes”: [

    {
“path”: “/destinations/cloudbackend“,

  
“target”: {

     
“type”: “destination”,

    
“name”: “cloudbackend

      },
“description”: ” Company List”

    }

  ]

}

————————————————————————————————————————-

Now the last step in the “index.html” replace the following line

Old Code

  var oModel = new sap.ui.model.odata.ODataModel(proxy/https/companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/, false);

sap.ui.getCore().setModel(oModel);

with the new code.

New Code

var oModel = new sap.ui.model.odata.ODataModel(/destinations/cloudbackend/refapp-companylist-web/companylist.svc/, false);

sap.ui.getCore().setModel(oModel);

Now for the last time push your changes to the cloud and activate the version.Thistime around the application on the cloud will be having a referenced destination as shown below.

/wp-content/uploads/2014/11/chrome7_581140.jpg

  Now if you test your Application url. Fortunately it would fetch the data from the oData service.

/wp-content/uploads/2014/11/chrome8_581141.jpg

Great!!!!!!

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply