Running UI5/ FIORI Application on the Cloud without Gateway

[Former Member]

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 :smile: .

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 - SAP HANA Cloud Platform
• Step 2: Initial Configuration - SAP HANA Cloud Platform
• Step 3: Configuring Access Control(HTTP) - SAP HANA Cloud Platform
• Step 4: Creating the HTTP destination - SAP HANA Cloud Platform
• Step 5: Creating UI5 application from WebIDE & deploying.
• Step 6: Configuring the destination properties in the UI5 application.

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. 

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. 
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. 

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. 
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. 
3. Provide the Destination Configuration as listed below,
4. 
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,

   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. 
4. It will ask for HANA Cloud Account password, provide your trial account password.
5. 
6. Once deployed you will see the application will be available in HTML5 Application Section.
7. 
8. After deployment you can now use the following URL to test the application.
   

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 :smile: .

Thanks & Regards,

Rumeshbabu S