Skip to Content
Author's profile photo Former Member

Hybrid SAPui5 App with HCP and Test it with Android Emulator

This is a step by step guide to create Hybrid SAPui5 App with HCP and Deploy it to a Mobile Device

  1. 1.Create SAP UI5 app
  • Configure a destination or data source for the app
  • Build an app using Fiori template
  • Test your mobile device by deploying the app to your SAP HANA Cloud Platform

2.Deploy a Hybrid App on SAP HANA Cloud Platform Mobile Services(HCPMS)

  • In Hana Cloud Cockpit, Create the application in SAP Hana Cloud Platform Mobile Services
  • Device Configuration in SAP Web IDE
  • Start the Hybrid App Toolkit Connector
  • Deploy the application to Hybrid App Toolkit
  • Run the App on the Android Emulator, iOS simulator or Actual device


Create SAP UI5 app


1.1 Configure a destination for the app

  • Log on to your HCP cockpit  account
  • In the menu item of HCP cockpit, select the Destination tab and choose New Destination to open a Configuration Panel
  • Enter all the following entries in Destination Configuration Panel

          /wp-content/uploads/2016/07/1_995563.png

  • Add three more properties with the help of New Property button

          /wp-content/uploads/2016/07/2_995633.png

  • Choose Save and the complete Destination Configuration form should look like this

              /wp-content/uploads/2016/07/c1_995634.png           

  • Click the “Check” icon on the right side of the newly created destination and make sure that the connection to the destination is successful

/wp-content/uploads/2016/07/c2_995635.png   

1.2 Build an app using Fiori template

  • Open SAP Web IDE by going to the Subscriptions in the HCP cockpit
  • Open the File menu of SAP Web IDE, select New -> Project From Template

                 /wp-content/uploads/2016/07/c3_995636.png  

  • We will get a new project creation wizard, on the Template Selection step
    1. Click on the SAP Fiori Master-Detail Application to mark it as the template to be used for your new project
    2. Press Next button to go to the Basic Information step

                        /wp-content/uploads/2016/07/c4_995637.png

  • On the Basic Information step
    1. Enter the Project Name as Test
    2. Check set this project as hybrid mobile application
    3. Press Next button to go to the Data Connection step

                         /wp-content/uploads/2016/07/c5_995638.png

  • On the Data Connection step
    1. Select the Service URL as Source
    2. Select Service Information as ES4 from the drop-down list
    3. Enter this URL:   /sap/opu/odata/IWBEP/GWSAMPLE_BASIC/
    4. Press the button present with the Play icon, on pressing this icon a CollectionSets will be displayed on the right side
    5. Click Next button to go to the Template Customization step

       /wp-content/uploads/2016/07/c6_995644.png

  • On the Template Customization step, enter this data

          Fill out the Application Settings, Data Binding- object and Data Binding Line Items as shown below 

                          /wp-content/uploads/2016/07/c7_995645.png                                              /wp-content/uploads/2016/07/c8_995647.png                                

                        /wp-content/uploads/2016/07/c9_995651.png

  • Click Next button and press the  Finish button to end the wizard
  • Check that a new folder Test is added to your workspace
  • Select the folder Test and preview the app by clicking on the Run button as Mock data

                          /wp-content/uploads/2016/07/c10_995652.png

  • Select the folder Test and preview the app by clicking on the Run button as Actual data

                          /wp-content/uploads/2016/07/c13_995653.png


Deploy Hybrid App on SAP HANA Cloud Platform Mobile Services (HCPMS)

Prerequisite: SAP Web IDE Hybrid App Toolkit  installation procedure


2.1 Create the application in SAP Hana Cloud Platform Mobile Services


In this section, you will create an application in HCPMS. This step is similar to the creation of a Destination in HCP, and allows your HCPMS instance know how to handle incoming application requests (registration, authentication and data).


  • Log on to your HCP cockpit  account
  • In the menu item of HCP cockpit, select the Services tab and in Mobile Services group click on the Development & Operations tile.
  • Click on the Go to Service link to launch the Development & Operations Cockpit application
  • The Mobile Services Cockpit will be displayed, click on the Applications tile

           /wp-content/uploads/2016/07/c11_995657.png            

    • Click on the Create Application icon to add a new application definition. Edit the fields as shown below and click Save.
    1. Application ID: com.odata.hybrid (Note: must be the same as in Device Configuration in later step)
    2. Version: 1.0 (default)
    3. Name: Test
    4. Type: Hybrid (from drop-down)
    5. Description: Hybrid OData app
    6. Vendor: SAP
    7. Security Configuration: None (from drop-down)
    • Click on the Backend tab, Fill in the connection information as shown below and click Save
      1. Backend URL: https://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/
      2. Proxy Type: Internet (from drop-down)
      3. Authentication Type: Basic Authentication (from drop-down), give the username and password given to the Destination
      4. Maximum Connections: 500
      5. Alias: (leave blank)
      6. Rewrite mode: Rewrite URL on HCPms (from drop-down)
      7. Relative Paths: (leave blank)
  • Click on save
  • You have successfully created the application in HCPms. Click on the Home icon (in the upper left corner of window) to return to the Mobile Services Cockpit
  • We can observe that the application and connection numbers have incremented

                /wp-content/uploads/2016/07/c12_995658.png   

2.2 Device configuration in SAP Web IDE


  • Open SAP Web IDE. Access the Project Settings of the Test Project that was created in the previous tutorial by right-clicking, select Project Settings
  • Select Device Configuration setting in the Project Settings window
  • Fill the below-mentioned information in the Application section
    1. App Name : Test
    2. App ID : com.odata.hybrid  (NOTE: The App ID field here must match the string you entered for “Application ID” when creating the HCPms application(above))
    3. Description : hybrid version of OData web app
    4. Version : 1.0.0
    5. In the Build Options section, click the radio button for Release Mode
    6. In the Platforms section, select the options applicable for your development machine: · Windows: Android       · Mac OS: Android and/or iOS
    7. In the Plugins section, you specify the plugins the application will use. For this exercise, do not check any of the standard Cordova plugins. Click the “Kapsel” tab, and select the Logon Manager. After selecting Logon Manager, click the radio button next to “HANA Cloud Platform mobile services” and ensure your HCPms Host URL is correct
    8. Leave the Preferences section unchanged and click Save


2.3 Start the Hybrid App Toolkit Connector


Now we will start the Hybrid App Toolkit Connector and test the communication between it and SAP Web IDE. You must have completed the download and installation process for the Hybrid App Toolkit before starting this section


  • Open a Terminal or command window and navigate to the HAT directory  ·  On Windows, double-click run.cmd  ·  On Mac, type:“./run.sh

               /wp-content/uploads/2016/07/c16_995659.png                 

              /wp-content/uploads/2016/07/c17_995660.png                                              

  • To test the connection between HAT and your Web IDE instance, select the Web IDE menu option: Tools -> Preferences
  • Select Hybrid Application Toolkit.
  • Click on Test Connection button.

               /wp-content/uploads/2016/07/c18_995661.png

                         

2.4 Deploy the Application to Hybrid App Toolkit 

  • Right click on the Test project folder. Select Deploy -> Deploy to local Hybrid App Toolkit

                 /wp-content/uploads/2016/07/c19_995662.png           

  • Deployment will start. You can view the progress in the console, and when it is complete, you will see the dialog box below. Click OK to close it

                   /wp-content/uploads/2016/07/c20_995663.png     

2.5 Run the App on the Android Emulator, iOS simulator or Actual device


             In this section, you will run the hybrid app on the Android Emulator, iOS Simulator or Android/iOS device

  • To run the hybrid app, right click on the Northwind project folder, then select Run -> Run on -> Android Emulator.

                     /wp-content/uploads/2016/07/c21_995664.png    

  • At the prompt for the signing key, select Test Key and click OK. HAT will launch the emulator/simulator and load the app

                       /wp-content/uploads/2016/07/c22_995665.png

  • The app will launch on the emulator/simulator or device, and the display the registration screen. Enter the User Name and Password

                         /wp-content/uploads/2016/07/c23_995672.png

  • You can enter an App Passcode if you would like. To run the app without a passcode, click Disable Passcode

                         /wp-content/uploads/2016/07/c24_995673.png

  • Click on Submit
      • App is running

                            /wp-content/uploads/2016/07/c25_995674.png

Assigned Tags

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

      Hi Chandan,

      Great blog...! I am working on a hybrid app and I had few questions regarding the login screen and passcode functionality.

      1. Is there any way of configuring the HCP login credentials which will bypass the login screen?
      2. I don't want the passcode option, is there any way to disable it completely? I mean do some configuration wherein this page is not at all displayed to the user.

      The application which I am working on already has a login screen, so I want to bypass both these screens. The user should be able to see only the app login screen after installing the app on their devices. Hopefully my requirement is clear.

      Thanks in advance,

      Meenakshi.

      Author's profile photo Ravi Chandra
      Ravi Chandra

      Hi Meenakshi,

       

      Did you get a solution ? I am also looking for the same we have a login screen which is using AD Authentication so we want to deploy hybrid app in SCP and want to use the in mobile directly without any HCP authentication..

       

      Can we use any static user at App/OData service level to avoid SCP login?

       

      I want to redirect to this app with existing authentication WebApp/Hybrid App .

       

      Thanks,

      Ravi

      Author's profile photo Ludo Noens
      Ludo Noens

      This blog post is outdated. We have reached end-of-maintenance for HAT local add-on. You can no longer download this tool from the SAP Store. We no longer support this tool. You are strongly advised to make use of our Cloud Build Service provided through Mobile Services to build hybrid apps. More information can be found here: https://blogs.sap.com/2018/08/16/announcing-end-of-maintenance-for-hybrid-app-toolkit-local-add-on-local-builds-only

      Ludo Noens
      Product Owner – Hybrid Application Toolkit