Skip to Content
Technical Articles
Author's profile photo Ashish Anand

Integrate SAP UI5 or open UI5 with Node.js

With JavaScript server side programming getting popular day by day, it clicked my mind to integrate SAP UI5 or open UI5 with Node.js.

What we are building?

We are building a UI5 based web-application which uses Node.js for backend logic. For the sake of simplicity we will create a small application which list down all the seven wonders of world with their respective location.

Prerequisites

  1. Node.js should be installed on your machine. To install Node.js please visit http://nodejs.org/
  2. SAPUI5ย  UI Development Toolkit for HTML5 should be installed on your machine. To install please visit https://tools.hana.ondemand.com/
  3. Git Bash should be installed (optional). I will be using Git Bash for this demo.

Writing the backend Node.js code

In the backend, we will be exposing the data using REST service which will be consumed by the UI5 application. Following are the steps to expose a REST service via Node.js:

  1. Create a new folder anywhere on your machine
  2. Inside the folder, create a package.JSON file and copy the following code:/wp-content/uploads/2014/11/package_585940.png
    The above code gives some general description about Node.js project like name of project, description, version and most important specify the dependencies which will be used in the project. In our case, its Express module which will be used for exposing the REST APIs. A JAVA developer would be able to get the analogy between package.JSON in Node.js and pom.XML in maven.
    To know more about Express module, please visit http://expressjs.com/
  3. Open Git bash, in the Git Bash, Navigate to that folder and execute the following command
    Npm install
    The above command will install express module for the project.
  4. Create a Server.js (you can choose any name of your choice) in that folder and copy paste the following code:
    /wp-content/uploads/2014/11/code1_585950.png
  5. Open Git Bash and Navigate to the folder. Run to following command to host the project:
    node server.js
    Note: server.js is the name of the .JS file which we created in step 4.

Testing the hosted service

To test the service hit the URL http://localhost:4000/SevenWonders
/wp-content/uploads/2014/11/test1_585951.png

Wow it’s working ๐Ÿ™‚ ๐Ÿ™‚ !!!

Creating the UI

For the UI, we will be creating UI5 desktop application. We will be using eclipse with UI5 application development plugin installed in it to write the UI code:
/wp-content/uploads/2014/11/eclipse_585952.png

The Index.html

Nothing special in the below code, just a typical index.html for UI5 project
/wp-content/uploads/2014/11/ui1_585955.png

View.JS

In the view.JS file we will create a table with two columns i.e. Wonders and location:
/wp-content/uploads/2014/11/ui2_585957.png

Controller.JS

ย  In the controller onInit() method, I have fired a get call towards our โ€œSevenWondersโ€ service and binding the data with the table in view.
/wp-content/uploads/2014/11/ui3_585958.png

ย 

you may feel that, I have not discussed the UI code in a very detailed manner. well yes, it was inteded ๐Ÿ™‚ as that is not the purpose of this blog. To learn UI5 in detail, please visit

https://sapui5.hana.ondemand.com/sdk

SAPUI5 Developer Center

ย 

Integrating the front and back ends

  1. Navigate to the UI5 project workspace and copy the Index.html and the folder containing views and controller to your clipboard.
  2. Paste the clipboard at the location where server.JS file exists. After copying, your folder will look like
    /wp-content/uploads/2014/11/folder_585962.png
  3. Add the following line of code in you server.JS
    app.use(express.static(__dirname));
    /wp-content/uploads/2014/11/finalcode_585963.png

    The above code tells to route default request (i.e. localhost:4000) to current directory, and since we have kept index.html file in the same directory, index.html will get render.

 

 

Testing the final application

  1. Navigate to the directory containing server.js file and execute the following command in your Git Bash
    Node server.js
  2. To test the final application just hit http://localhost:4000/ in your browser
    /wp-content/uploads/2014/11/rsult_585964.png

Conclusion

We have successfully created, deployed and tested a complete JavaScript based web application and integrated node.Js with SAP UI5 or Open UI5.

One good change which I personally see with evolution of server side JavaScript programming paradigm is that now the UI and backend developer can be on the page, otherwise earlier it was like /wp-content/uploads/2014/11/code_585965.jpg

๐Ÿ™‚ ๐Ÿ˜› ๐Ÿ˜Ž ย  Hmm, Feedbacks . . . .always welcome ๐Ÿ˜ณ ๐Ÿ˜‰ ๐Ÿ˜Ž

Assigned Tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Well done Ashish!!!

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Thank youย ?

      Author's profile photo Ipshita Lahiri
      Ipshita Lahiri

      very well documented.

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Thank you ๐Ÿ™‚

      Author's profile photo Former Member
      Former Member

      Hi Anand,

      I tried to follow the exact steps mentioned in your post, however I just see the json format in the web browser , is that something assumed which I didn't know or do it.

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Gulzar,
      I could't follow your, which JSON you can see, which url you hitting ?

      Author's profile photo Swaroop Anasane
      Swaroop Anasane

      Hi,

      Looks like you are using /sevenWonders in the url. Just remove that and it should be good.

      Regards,

      Swaroop

      Author's profile photo Mauricio Pinheiro Predolim
      Mauricio Pinheiro Predolim

      Great example! Congrats.

      I was wondering...is it possible to use node.js as middleware/authentication method between SAPUI5 and SAP Gateway(oData) as backend?

       

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Mauricio,

      Thank you !! Could you please explain your scenario, Because SAP UI5 can be authenticated against SAP Gateway with OData Model automatically without using any middle wares. So i was curious what's your scenario.

      Author's profile photo Mauricio Pinheiro Predolim
      Mauricio Pinheiro Predolim

      Hi Ashish.

      I was thinking in use Node.js between frontend(SAPUI5) and backend(SAP on-premise oData) to authenticate users between the 2 parts.

      The user access SAPUI5 app, the input info pass through node.js, authenticates the info and forward the input info to oData created on SAP, returning the info to SAPUI5 frontend.

      Actually i use SAPUI5 application with SAP gateway as usual but i was thinking if the idea above is possible.

      Thanks!

       

      Author's profile photo Former Member
      Former Member

      Hi Ashish,

      Just one doubt can you please tell explain ย oTable.bindRow("\modelData"); can you please explain this.

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Sumit,

      BindRow method of SAP UI5 table control is used to bind the table rows with the data model. Hope I answered your questions.

      Thanks and Regards

      Ashish

      Author's profile photo Writwick Bhattacharya
      Writwick Bhattacharya

      Hello Ashish Anand ,

      Your example is great. But I have couple of questions :

      How node js enhances the capability/performance of sapui5 compared to xsodata in sap hana as a backend?

      AND

      Why one should prefer node js as a backend over sap hana xs or vice-versa?

      Author's profile photo Filemom Barbosa Teixeira
      Filemom Barbosa Teixeira

      Really good stuff Ashish Anand, Thank you a lot!

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Filemom Barbosa , Thanks a lot for your feedback.