UI5 and HANA in Harmony

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 NameValue: 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 might 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 that 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 model's 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!