Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member208486
Participant
Happy #APIFriday all! I was at the airport a couple of weeks ago when the weather went crazy and the chances your flight was actually going to take off was dropping with the sun. After getting on a plane then being kicked off and spending 16 hours traveling to get from San Francisco to Chicago, I thought it would be nice to talk about systems working in harmony ❤️ like UI5 and HANA, unlike weather and SFO 😞

So you have a HANA database? Now how to you consume that outside of your HANA DB instance? Or maybe someone has exposed a HANA DB as a service for you. What do you do?



When you exposed your HANA database as an OData service, it can be treated like other OData services such as Gateway or a JSON/OData API.

Let's head over to our SAP Cloud Platform! Once you are provided with an URL for the OData service for the table you want data from, you can create a destination in your SCP. Go to Destinations, Create New, and enter the following information.














































Field Name Value
Name whatever you want to call your service
Type HTTP
URL your HANA OData service URL
Proxy Type Internet
Authentication BasicAuthentication
User  your HANA username
Password  your HANA password
Additional Properties
WebIDEEnabled true
WebIDEUsage odata_gen



Save your destination and check the connection. Once you see that green, go to go message, let's head over to our Web IDE.

In your Web IDE, find (or quickly create) an application that you want to add your HANA DB OData service to.

To get started, select the application name on the left side panel. In my examples, I am adding the OData service to my Kegerator app. Our HANA DB stores all the data from our IoT Kegerator we use for events. I need to get that data into my UI5 app so I can provide some cool visuals of the kegerator status. Right click the application name. Go to New > OData Service.



Select Service URL from the Sources list. Select your HANA DB OData service from the list and enter the relative path. It might just be a / or it be a longer path. When you click Test, you should see your HANA DB table(s).



Go ahead and click Next and Finish.

This will create a new data source in your dataSources array in your manifest.json file. Take a look at your manifest.json file and verify the new Data Source is there. Also note there is a new metadata.xml file in the local service folder. The OData service created a metadata.xml file so you can test locally and against the live service.
"dataSources": {
"KeggieData": {
"uri": "/kegerator/sensors.xsodata/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "localService/KeggieData/metadata.xml"
}
}
}

To use this new data source in our view, we need to also create a model in our manifest.json file. You can do this by adding some code to the models array or by using the description editor to visually define a new model. The model can be your default model (if you do not already have one defined) or it can be named. The data source should be the new data source you just added to your application. Mine is called KeggieData. Make these changes and Save your changes.
"models":{
...,
"keggieData": {
"settings": {},
"dataSource": "KeggieData",
"preload": true
},
...
}

We can now use our OData model in our view! In your view file, let's add a table to display data from one of our tables. In the table, we can define the items aggregate as the model and specific table we want from the database. In my example, I want to display the temperature data, so I use model keggieData and go to the temperature table. Add some <Column>s to the <columns> of the table to define the column headers. Once all the <columns> are defined, create the <items> template. For each item in the "items" aggregate, one <item> will be created. I only have 2 columns, so I need 2 controls in my cells. In the cell control, we define the data to be bound to the row. In my example, I want one column to show the timestamp and another to show the temperature at that time in Celsius. Save your changes.
<Table id="idProductsTable"
items="{keggieData>/temperature}" >
<headerToolbar>
<Toolbar>
<Title text="Products" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column
width="12em">
<Text text="Datetime" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="Temperature" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{keggieData>TDATE}" />
<Text
text="{keggieData>TEMPERATURE} °C" />

</cells>
</ColumnListItem>
</items>
</Table>

Make sure all your changes are saved and RUN your application. You will see a table in your UI with data from your selected table in your HANA DB.



That was easy, right?

Life is so much easier when everything works in harmony. Hope this makes it simpler to integrate your OData service in your UI5 app 🙂
3 Comments