Skip to Content

In my last blog from Nov. 14th I wrote about my Open Source project in which I develop a OData server for node.js. In this blog I want to show you how easy it is to write a Fiori app in SAP Web IDE that connects to an onpremise node.js backend application that uses my n-odata-server npm package.

I will not go into the details of writing the backend application here but only focus on the frontend application in Web IDE and configuration of the connection between the node.js server and hcp. If you are interested in writing the backend application you should have a look at my github repository. There you find a simple example that shows how you can create such an app in a few minutes.

The app I create here is a Master-Detail Fiori app that displays some customer data (see last screenshot for the apps output).

Prerequisites

The prerequisites for this blog are that you have created a backend application and that this is started (by simply entering node . at the command line). The default port of such a backend application is 3000. So the complete local URL is


http://localhost:3000

Additionally you should have installed the SAP Cloud Connector (CC) and be registered on the HANA Cloud platform (HCP).

So lets start developing our frontend application.

Configure Cloud Connector (CC)

Before you can connect to your locally started node.js server application that acts as the OData server you have to start and configure your CC. After you have started the CC you can connect to the Admin-UI by calling the URL

https://localhost:8443/

You have to connect the CC to your hcp account (see CC documentation). When you have done this go to the menu item Access Control and add a new mapping for your local node.js server. Use the settings of the following screenshot.

SAP HANA Cloud Connector.png

This setting in the upper table maps your locally running host to a virtual host with name n-odata-server-local. In the lower table you give hcp access to all URLs of port 3000 on your localhost.

Create destination on HCP

In this step you create a destination on HCP that you later use in your application. This destination leads to your local node.js application. Enter the following settings for this destination.

hanatrial.Destinations.png

In the field URL you enter the URL of your virtual host that is exposed by CC. The additional properties on the right side are also important. If you don’t add them you will not be able to choose this destination in the next steps.

Create Fiori app

In this step you create a Fiori app with the Master-Detail template of SAP Web IDE. This is the same as if you use a SAP Gateway or any other destination. Therefore I will not go into much detail here, the screenshot should be self-explanatory.

So start the SAP Web IDE. If you don’t remember the URL you find it under menu item Subscriptions and then webide or have a look here for more details.

Create a new project

Create a new project in Web IDE by right-clicking on any node in Web IDE and selecting New->Project from Template.

Bildschirmfoto 2015-12-22 um 13.38.22.png

Choose Template Master-Detail

Bildschirmfoto 2015-12-22 um 13.40.13.png

Insert project name

Choose a project name of your choice.

Bildschirmfoto 2015-12-22 um 13.41.39.png

Choose destination

In the next step of the wizard you have choose the destination you want to use for your application.

Select “Service URL” as Source and then select the before created destination.

Bildschirmfoto 2015-12-22 um 14.19.04.png

After you chose your destination you have to enter the URL of the OData service. The default setting for the n-odata-server is /odata. So enter this in the URL field.

Bildschirmfoto 2015-12-22 um 14.19.34.png

After you have clicked on the arrow or left the field you will see all Entityset that your OData service exposes. In the following step we are interested in the Customers entityset.

Click next to configure your app in detail.

App configuration

In this step you configure which entityset (collection) of your OData service you want to use and which field should be displayed on the screens. Take the following screenshot as template.

Bildschirmfoto 2015-12-22 um 14.43.04.png

Finish app creation

In the last wizard step you simply have to press Finish to finally create your application. The sourcecode for your application is now generated.

Bildschirmfoto 2015-12-22 um 14.43.26.png

Run application

After your project is generated you can simply run it by right-clicking on the project node and choosing Run –> Run as –> Web Application.

Bildschirmfoto 2015-12-22 um 14.44.08.png

Cause the generator created two start files you have to choose the one you want to use. Selecting index.html is fine here.

Bildschirmfoto 2015-12-22 um 14.44.40.png

See the output of your app

Web IDE opens a new TAB/Window that is running your app. You can now browse through all the customers of node.js application.

Bildschirmfoto 2015-12-22 um 14.45.22.png

Conclusion

You see that working with the n-odata-server is as easy as using a SAP Gateway server Odata service. But you don’t need to have a full blown SAP R/3 or a HANA system in the backend. You can run the node.js server with a minimal amount of resources (memory, disk space). Even though you can use a local or corporate database with the n-odata-server you are not forced to. The n-odata-server can save all it’s data into a single file in the filesystem. This is mostly sufficient in the development and functional testing phase.

But the n-odata-server may also be a choice if you want to write Fiori apps that use data from corporate databases that are in use for a long time and that you don’t want to or cannot migrate to HANA or any other OData-friendly technology.

I highly appreciate your comments and if you want to contribute to the project you’re welcome. 

To report this post you need to login first.

2 Comments

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

    1. Helmut Tammen Post author

      Hi Jean Guo,
      what do you mean with “cannot see which model is used”? Your Fiori app uses the model that is defined in manifest.json file of your component.

      Regards Helmut

      (0) 

Leave a Reply