Using a Third-party Library with SAPUI5 Application - SAP Cloud Platform Development Scenario - Part 1

[Former Member]

In this series of posts i will demonstrate how we develop an SAP UI5 app that use an external library and communicate with a HANA Cloud Back-End using Odata calls.

Use Chrome as browser. Go to https://account.hanatrial.ondemand.com/ and log in to your SAP Cloud Platform cockpit.



After a success authentication you will access neo main page, with your P_USER_ID, Click on the hyper link to access the SAP Cloud Platform Cockpit





To develop SAPUI5/HTML5 apps in SCP we have the SAP WEB IDE available as a service. Choose Services from the left bar menu



Filter the result list like this



Note : If this is your first time you need to activate this service and switch on Enabled (green) mode. I will not explain this point because we have a lot of content talking about how to start using WEB IDE to develop SAPUI5/Fiori apps.

Access the service main page and choose “Go to Service”

UI Description:

We will create a booking app which uses a Third party Open source Calendar. For more information you can visit the web site https://fullcalendar.io/

A main page with the component



Click on a green Event and navigate to the booking form. The requester data will be loaded from my session profile this app need a login/password and we display default values for the other fields.





Change some information and click Send Booking request.





The request is sent to the server and the app redirect us to the main page. But this time we will notice that the color (Status) is changed for the event.



We have two mode month and week if we switch to month the layout will be shown like this:



On WEB IDE the app look like this:

Back-End Description:

The back will be a HANA XS project that will communicate with our SAPUI5/SCP app through Odata services.

Back to SAP Cloud Platform Cockpit, to create a non-permanent MDC Database called “mdc”.





For more information you can go to https://www.sap.com/developer/tutorials/cp-hana-create-mdc-instance.html



To see the Back-end project we have to navigate to the Development tools Workbench.



Use a Developer User and not the default SYSTEM User to create HANA XS Project. For the first time you have to create your SYSTEM USER with roles that allow you to access to the Administration tool and then you create your Dev User with the right roles.



Warning :

The debug mode was not available the first time even after adding the role "sap.hana.xs.debugger:Debugger" on HANA XS Project so i used this SQL Instruction.

alter SYSTEM alter configuration ('xsengine.ini','SYSTEM')set ('debugger','enabled')='true' with reconfigure;

The project has the structure below:

Destination :

SAPUI5 will communicate with our HANA XS project through an SCP Destination.

Go to SAP Cloud Platform Cockpit and from the left menu choose Connectivity -> Destination



Below needed information. You notice that i used a BasicAuthentication with my Dev User created previously.

Conclusion :

This conclude the presentation and the architecture i used for this development. In the next post i will share with you source code needed to develop project like this so stay tuned.

You can test the final app here https://bookingebcv2-p601643trial.dispatcher.hanatrial.ondemand.com/

Note: As im using a Trial account my MDC Database is stopped every day and i need to restart it manualy.

Thanks for reading.

Next Post => https://blogs.sap.com/2017/10/26/using-a-third-party-library-with-sapui5-application-sap-hana-cloud-...