Skip to Content

Build and run a hybrid app with SAP Web IDE and Hybrid App Toolkit

Previous

Build and run a hybrid app with SAP Web IDE and Hybrid App Toolkit

By akula86

Utilize the Hybrid App Toolkit to build a downloadable hybrid app and run it on a device or simulator

You will learn

When compiled, your Web IDE generated mobile web app will be packaged using the Apache Cordova container along with any Cordova or SAP plug-ins for Cordova you selected in the [hybrid configuration tutorial]. The output will be a binary file for iOS or Android operating systems that you will run on a simulator, emulator or actual device.

Details


  1. In SAP Web IDE display the Console by selecting View > Console.

    open console

  2. The Console is displayed in the lower part of the window and can be resized by dragging the top of the frame up or down. The console messages will allow you to monitor the compilation process.

    console

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

    start deployment

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

    start deployment

  5. To run the hybrid app, right click on the northwind project folder, then select Run > Run on > Android Emulator (or iOS Simulator if you are using a Mac). You can also run it on an Android or iOS device if you prefer.

    run on Android Emulator

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

    Local signing key

  7. The app will launch on the emulator, simulator or device, and the display the registration screen. Enter your HCP Username and Password, verify that Secure is enabled, then click on Register.

    Field Name Value
    Username <your HCP account without “trial” at the end> e.g. p12345678
    Password <your HCP account password>

    Registration screen

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

    Passcode screen

  9. The app will go retrieve the data through HCPms and display the master (list) view.

    master view

  10. Click on one of the items in the list to view the details page, and scroll down to view the rest of the details. Depending on far you have gotten in the Web IDE tutorials, your screen may look different that shown here.

    detail view

  11. If you have implemented a second tab in your app, click it to see the data there.

    detail view

Next Steps

Updated 04/28/2016

Time to Complete

15 Min.

Intermediate

Next Steps

Next
Back to top