Skip to Content
Author's profile photo Former Member

Running UI5/ FIORI Application on the Cloud without Gateway

Hello All,

This is my first blog in SCN, would like to share my thoughts about developing UI5/ FIORI application on HANA Cloud Platform(HCP), Kindly ignore for any grammatical mistakes 🙂 .

This blog is about developing/testing your UI5/FIORI application anywhere/anytime using HCP without need to get connected to your on-premise network.

All this can be done by deploying our UI5 application to HCP as a HTML 5 application instead deploying into SAP Gateway system. You all might have question that when the application is not deployed in the gateway system how the application will be connected to back end & how the OData service will give us the results ?. Yes this is possible with the help of HANA Cloud Connector(HCC).

SAP HANA Cloud Connector: used to connect our on-premise network with HCP

More Info About HANA Cloud Connector.SAP HANA Cloud Platform

Following are the overview of steps needed for our Requirement,

Step 1: Installing the Cloud Connector

  1. Download the HANA Cloud Connector based on your OS,in this case we are using Windows OS.(Note HANA Cloud Connector will work only in 64-Bit OS).
  2. You can download the HANA Cloud Connector from the URL SAP Development Tools for Eclipse.
  3. Download the .zip file for the development scenario.
  4. Once you downloaded you can run extract & run go.bat file in the extracted folder(Make sure that JAVA_HOME environment variable is set to correct JDK location in your system).
  5. Any error during initial startup will be logged in the HANA cloud connector extracted folder under<Extracted_Folder/log/ljs_trace.log>.
  6. Now run the URL https://localhost:8443 (default port) in your local browser(Chrome is better).
  7. Once you see the following screen which means your HANA cloud connector is installed correctly.
  8. Login1.png

Step 2: Initial Configurations

  1. Once the HANA cloud connector has been installed you can use the initial userid:Administrator & passoword:manage to login to HANA cloud connector.
  2. Choose the installation type in this case as Master.
  3. At first it will ask to reset the password.
  4. At first it will ask for the HANA Cloud Platform Account details which is to be entered.
  5. You can find your account details from your HANA Cloud Platform Account , Under Dashboard->Account.
  6. Account_Details.png
  7. Landscape Host -> hana.ondemand.com(Productive Usage) / hanatrial.ondemand.com(Trial Account).
  8. After Configuring your account details, make sure the Connector state is green also your trail account under Connectivity you will see the HANA Cloud Connector in Connected State.
  9. DestinationDetails.png

Step 3: Configuring Access Control(HTTP)

  1. You need to enter your application server details in Access Control section, typically your back end system details.
  2. You can find your application server details from SAP GUI screen.
  3. ApplicationServerDetails.png
  4. Provide virtual host/internal host & virtual port/virtual host in the system mapping section from the above highlighted area.
  5. Choose HTTP as Protocal
  6. Choose X.509 Certificate as Principal type.
  7. Choose ABAP System as Backend type.
  8. Under the accessible resources provide the following paths & select Path and all sub-paths as Access policy.
    1. /sap/opu/odata
    2. /sap/bc/ui5_ui5
    3. /sap/bc/adt
    4. /sap/bc/bsp
  9. Save your details & now you can see the system mapping & resource mapping will be highlighted in green LED.

Step 4: Creating the HTTP destination

  1. You can create a new destination in HANA cloud platform under destination tab.
  2. DestinationDetails.png
  3. Provide the Destination Configuration as listed below,
  4. DestinationDetails.png
  5. You need to provide application server URL http://<host_name>:<port_no> in the URL section.
  6. You can add the additional properties in order to be used by WebIDE,

     sap-client => <SAP_CLIENT>

     WebIDEEnabled => true

     WebIDESystem => <SID>

     WebIDEUsage => <List of Resource Used by comma seperated> => odata_abap,odata_gen,ui5_execute_abap,dev_abap,bsp_execute_abap,plugin_repository,

DestinationDetails.png

   7. Save your entries , now the destination will be created & please note down the Name of the destination which will be required in the next steps.


Step 5: Creating UI5 application from WebIDE & deploying

  1. Now create Basic UI5 application from WebIDE.
  2. Deploy to SAP HANA Cloud Platform.
  3. DestinationDetails.png
  4. It will ask for HANA Cloud Account password, provide your trial account password.
  5. DestinationDetails.png
  6. Once deployed you will see the application will be available in HTML5 Application Section.
  7. DestinationDetails.png
  8. After deployment you can now use the following URL to test the application.DestinationDetails.png

Step 6: Configuring the destination properties in the UI5 application.

  1. Now the application is up & running in HCP , you can use this URL anywhere to access the application.
  2. Now the next step is to access the back end OData.
  3. Usually will use our back end OData service as /sap/opu/odata/sap/<OData Service Name>/.
  4. But in this case when the application running from HCP we need to use the OData Service URL as /destinations/<Name of the destination that was created at step 4>/sap/opu/odata/sap/<Name of the OData Service>/
  5. Next we need to setup the destination in neo-app.JSON file in our project & we need to provide the following details on the same.

neo-app.json:

{

  “welcomeFile”: “index.html”,

  “routes”: [{

  “path”: “/resources”,

  “target”: {

  “type”: “service”,

  “name”: “sapui5”,

  “entryPath”: “/resources”

  },

  “description”: “SAPUI5 Resources”

  }, {

  “path”: “/test-resources”,

  “target”: {

  “type”: “service”,

  “name”: “sapui5”,

  “entryPath”: “/test-resources”

  },

  “description”: “SAPUI5 Test Resources”

  },

{

  “path”: “/destinations/HCC<Name of the destination>“,

  “target”: {

  “type”: “destination”,

  “name”: “HCC<Name of the destination>

  },

  “description”: “Backend System”

  }],

“cacheControl”: [{

  “directive”: “private”,

  “maxAge”: 0,

  “path”: “*html”

  }, {

  “directive”: “public”,

  “maxAge”: 31536000

  }]

}

     6. Make the changes & deploy again to HANA Cloud Platform.

     7. Now you can see the Required Destination section in your HTML5 application will show the provided destinations.

Now your application will be able to run similarly as deployed in gateway system with the back end data connected from anywhere with the help of your HTML5 application in your HCP.

Enjoy testing your application from anywhere 🙂 .

Thanks & Regards,

Rumeshbabu S

Assigned Tags

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

      Hi Rumesh,

      Great to know all this. Your blog is Helpful and Interesting  !

      Thanks,

      Saurabh Sharma

      Author's profile photo Former Member
      Former Member

      hi,

      Do we need to pay for the license fee for the HCC? Or can we use it for testing purposes for free?

      Thanks,

      Cem.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi,

      Do we need to pay for the license fee for the HCC? - No

      SAP HCC can be downloaded for free it has no license, but it should run in the respective on-premise network where exactly the ECC server is hosted for the productive scenarios.

      can we use it for testing purposes for free?

      For testing purpose you can connect your on-premise ECC system with HCP using HCC(for free) which could be installed on your desktop also, but when when you restart/shut down your desktop you have to start again the HCC to connect HCP with on-premise system.

      Thanks,

      Rumeshbabu S

      Author's profile photo Markus Tolksdorf
      Markus Tolksdorf

      Hi Cem, Rumeshbabu,

      even though there is no separate license for the SCC, it is not for free in productive environmments in the sense that you need to buy a license for HCP. There exist several packages that include also the usage of the SCC for hybrid scenarios.

      Best rgards,

      Markus

      Author's profile photo Ulrich Schmidt
      Ulrich Schmidt

      Hi Rumeshbabu,

      the acronym for "SAP HANA Cloud Connector" is actually "SCC", as you can for example see in its OSS component: BC-MID-SCC.

      Best Regards, Ulrich

      Author's profile photo Kuntal Sarkar
      Kuntal Sarkar

      Hi,

      I am facing issue in getting data from back-end system. Sharing the link of the issue I have raised in community.

      Not able to retrieve data from backed system in HCP hosted application

      can you assist me shoot this down.

      Regards,

      Kuntal

      Author's profile photo Ekansh Saxena
      Ekansh Saxena

      Hi RumeshBabu,

      Thanks for sharing this blog.

      I find the title of blog a bit confusing in the sense 'Without Gateway'. However, you are actually using OData services which are exposed via your gateway system.

      And when you say 'configuring Backend', it is actually the 'Front End Server' (FES) which hosts your GW (untill you are specifically talking about embedded deployment which is not the recommended approach).

      Regards,

      Ekansh

      Author's profile photo Former Member
      Former Member

      Hi Rumeshbabu,

      Is there any way through which i can access the "HCC<Name of the destination>" in my view file to display in the UI?

      Thanks and regards,

      Anand

      Author's profile photo Former Member
      Former Member

      Hi Ramesh,

      very simple and informative , I was looking for a a key information of how development consumes input from  back end system (Lets say on premise ECC ) and how the development services itself is being consumed by end users and to a large extent i got the answer here  - Thank you

      One doubt though , If SCC is not there there how does back end systems is integrated with HCP development -

      Animesh