Skip to Content
Technical Articles
Author's profile photo Maxime Simon

Show data from a HANA Cloud Odata service in a Fiori HTML5 table

In this blog, we will explore how to create a table from scratch in an HTML / Javascript Fiori application and host it on the SAP Cloud Platform.
The table will show data coming from an Odata service registered as a destination on SAP Cloud Platform.


Expose SAP HANA Cloud data through Odata services



Register a destination

In order to use external services from your Cloud Foundry Node.js application, you need to register such services in the Destinations section of SAP Cloud Platform Cockpit.
Open your subaccoun and select Destinations within the Connectivity tab.

Create a new destination with the following values :
– Name : orderentry
– Type : HTTP
– URL : The Odata service URL you created in Use xsodata to expose HANA Cloud tables as Odata services“, without any parameters. In my case it is
– Authentication : NoAuthentication (Add authentication here if you chose to secure your Node.js application when creating it)
Additional properties :
– WebIDEEnabled : true
– WebIDEUsage : odata_gen


Create a UI project

Open the SAP Web IDE, right-click your current workspace and create a new project from template.


Choose SAP UI5 Application within the available Cloud Foundry templates.

Give your SAPUI5 application a name and a namespace.

Leave the view type as XML.

Your project gets created as a Multi-Target Application (mta). It contains an app router which receives external requests and route them to the right resource, a UI deployer, and your actual UI.

Open the UI folder called “order”, and open the file xs-app.json
Here, you must add a route that will lead users to the destination you set in the previous chapter.
In the example below, all users who type a url starting with /orderentry/ will be redirected to the destination “orderentry”.

  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  "routes": [
        "source": "^/orderentry/(.*)$",
        "target": "$1",
        "authenticationType": "none",
        "destination": "orderentry",
        "csrfProtection": false
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"


Now, let’s define the controller.
Open the file View1.controller.js located in the controller folder.
Here, you can add the logic that will be executed when users access your page.
Add the function getData below onInit :

getData : function(){
            var that = this;
                url: "orderentry/customers?$format=json",
                contentType: "application/json",
                type: 'GET',
                dataType: "json",
                async: false,
                success: function (response) {
                    var oModel = new sap.ui.model.json.JSONModel(response.d.results);
                error: function (error) {

In the function getData, we perform an ajax call the relative url orderentry/customers?$format=json

The first part of this url “orderentry” is detected as a route in the xs-app.json . It gets redirected to the destination we defined earlier in the SAP Cloud Platform Cockpit.

On success, a model oModel gets created based on the Odata service.

In the next step, we create the User Interface in the View1.view.xml file.
Use this code to create a button and a table in XML. The button calls our function getData when pressed.

<mvc:View controllerName="order.order.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
				<Page id="page" title="{i18n>title}">
						<Button text="Get Data" press="getData" type="Emphasized"></Button>
						<Table id="order" items="{path: '/'}">
            <Column hAlign="Center" vAlign="Middle">
                <Text text="CUSTOMER ID" />
            <Column hAlign="Center" vAlign="Middle">
                <Text text="CITY ID" />
            <Column hAlign="Center" vAlign="Middle">
                <Text text="COUNTRY ID" />
            <Column hAlign="Center" vAlign="Middle">
                <Text text="REGION ID" />
            <Column hAlign="Center" vAlign="Middle">
                <Text text="CUSTOMER" />
            <Column hAlign="Center" vAlign="Middle">
                <Text text="CITYNAME" />
            <Column hAlign="Center" vAlign="Middle">
                <Text text="COUNTRYNAME" />
            <Column hAlign="Center" vAlign="Middle">
                <Text text="REGIONNAME" />
                    <Text text="{CUSTOMERID}" />
                    <Text text="{CITYID}" />
                    <Text text="{COUNTRYID}" />
                    <Text text="{REGIONID}" />
                    <Text text="{CUSTOMER}" />
                    <Text text="{CITYNAME}" />
                    <Text text="{COUNTRYNAME}" />
                    <Text text="{REGIONNAME}" />

The view, model and controller are all defined, now the application is ready to be run.
Select the webapp folder and Run index.html .
The first time you run it, the application will be built and then run.

The application opens in a new folder, and when you click on “Get data”, the table gets filled with data.

If the application does not work as expected, use the chrome tools (F12) to check whether the Odata service is being called correctly.

When you are ready to deploy your application, the next step is to build the mta_order folder, and then deploy it to SAP Cloud Platform.


Thank you Navin Saran for your help in building this app.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jimmy Arnold Moreno Nuñez
      Jimmy Arnold Moreno Nuñez

      Hi Maxime.

      I have an MTA project and I created a xsodata service and a destination with my node js URL service. When I make a deploy my service try to call another URL, this is not equal like my destination. Can you help me?

      Author's profile photo Pradeep Thattamparambil
      Pradeep Thattamparambil

      Hi Maxime, I have got a different scenario. I want to Acquire/Import data from HANA CLOUD and persist it in SAC. And avail the Smart Assist features like (Insights, Discovery, Predict), and Predictive Planning.

      Do you think I can use ODATA Service to connect to HANA CLOUD and get it into SAC for persistence.




      Author's profile photo Maxime Simon
      Maxime Simon
      Blog Post Author

      Yes, I think exposing an OData service from HANA Cloud, and importing data to SAC is the right approach.

      If you check SAP Note 2412507, we do not recommend using OData services for HANA on-premise.

      However, only live connections are supported between SAP HANA Cloud and SAP Analytics Cloud.As you might know, some smart assist/predictive features are not available when using a live connection.

      In that scenario, you can create an OData service with HANA Cloud, then create an "Import data" connection in SAC on that OData service.


      Author's profile photo Pradeep Thattamparambil
      Pradeep Thattamparambil

      Thanks very much Maxime. Appreciate that. Will check out this option.