Skip to Content


SAP Web IDE is an Integrated Development Environment for SAPUI5 and Fiori applications.

In this blog we shall see how to use Kapsel plugin App Update for a SAP UI5 mobile app. (along with Kapsel plugin Logon Manager)

(Note: This feature is not available for Web IDE local installation. Users should log on to a Web IDE application at HANA Cloud Platform.)


In this blog we shall see how to deploy an app to SAP HCPms with latest updates of the App.

The below steps show how to deploy a SAP UI5 mobile app along with latest updates first to HCPms and then onto a device on which it is installed. For this we will use Kapsel Plugin AppUpdate in SAP Web IDE.

We will follow the below steps,

  • Create an app on HCPms
  • Create SAPUI5 App in SAP Web IDE
  • Setup Device Configuration
    • Enable Kapsel plugin App Update and enter HCPms details
  • Deploy and Run the app on an Android Device via local HAT (just for making it look like an existing app on device)
  • Now, Update the app with necessary changes in SAP Web IDE
    • Add a test button onto the search bar as an update to the existing app
  • Deploy app to HCPms
  • Check for updates of the app on the device

The updates for the app is seen as soon as we start the existing app and will look like this


  • SAP Web IDE 1.11 and later (you can register at SAP HANA Cloud Platform to get your development environment)
  • Hybrid Application Toolkit 1.4.2 downloadable from here
  • An HCPms account configurable as described here
  • Valid User for ES1. Procedure to get access information is described here
  • An Android device which is recognizable using your PC. To connect an Android device to the PC to test your applications you need to install the appropriate USB driver. Follow the link for steps.
  • Please also ensure: (For these preparation steps please check at the end of this blog. For further info, You can also refer to the help document here )
    • Destination is setup (to ES1),
    • HAT Connector is started,
    • HAT Plugin is enabled in SAP Web IDE,
    • Kapsel SDK cli is installed


1. Create an application on HCPms

Logon to https://hcpmsadmin-<your_user> where you need to replace the string “<your_user>” with your user account

Click on Applications Tile


At the bottom press button Add (with plus symbol), to create a new Application


Enter the following values:

Application ID



1.0 (default)










Save the settings

Select tab Backend and enter the following:

Backend URL

Authentication Type

No Authentication

Proxy Type


Leave the rest of the default values as is.


Ping the Connection to verify a successful Ping Result

2.      Create SAPUI5 App

Create an SAPUI5 Master Detail App, for Products consuming services from ES1

In SAP Web IDE, go to File –> New –> Project from Template


Select SAPUI5 Master Detail Kapsel Application. Press Next3TemplateSelection.png

Enter a valid Project Name: Example ProductsAppUpdate, Press Next4BasicInfoTemplate.png

In the Data Connection, chose es1 from the dropdown of Service Catalog.

If asked for authentication provide UserID/Pwd for es1            5_0DataConnection.png

Search for service ZGWSAMPLE_SRV. Select it and Press Next


Enter the following into the fields:

Project Namespace: Products

Master Section

Title: Products

Odata Collection: ProductCollection

Search Field: ProductId

Main Data Fields

                Item Title: ProductId

                Numeric Attribute: Price

                Units Attribute: Currency Code

Detail Section

                Title: Products

                Additional Attribute1: Description

                Additional Attribute2: Category

Information Section

                OData Navigations: Supplier

                Navigation Attribute1: CompanyName

                Navigation Attribute2: PhoneNumber

                NavigationAttribute3: EmailAddress




Press Next

Press Finish

Optionally, Test the app as Web app. In SAP Web IDE open the newly created project ProductsAppUpdate. Right click on the index.html. Run –> Run as –> Web Application


3.      Device Configuration

In SAP Web IDE, Right click on Project ProductsAppUpdate. Go to the Project Settings


Go to Device Configuration and enter the following:

App Name


App ID

com.test.prods (this should match the Id given in HCPms for Application)








From Plugins, select Kapsel Plugin Logon Manager and App Update

Enter the HCPms host : hcpms-<you_user>


Save the Settings

4. Deploy and Run on Device

Right click on the Project ProductsAppUpdate. Deploy –>Deploy to Local HAT


On a successful deployment a success message appears


Right click on the index.html. Run –>Run on Android Device. Ensure the device is connected

On the Android device, a screen appears to launch the app.

Enter the Logon info for ES1 and press Register


Disable Passcode and press Submit


The Main View with all the products should appear


5. Update the app with necessary changes in SAP WebIDE

Go back to SAP Web IDE. Go to folder ProductsAppUpdate. Open view Master.view.xml. Add the following code to add a button on the search bar. Immediately after the <contentMiddle> of the searchbar


     <Button id=”btnTest” icon=”sap-icon://customer” tooltip=”TestButton”></Button>


Save the content


Optionally, Run the index.html as a Web app to test the added button


6. Deploy app to HCPms

In order to get the updates to the device on which the app is already installed, follow the steps below

Open Web IDE Console View via Menu View –> Console,to check errors if any.


Right click the project ProductsAppUpdate and select Deploy -> Deploy to HCP Mobile Services menu


If authentication popup appears, enter the Hana Cloud Platform mobile services(HCPms) login info. Press LogIn


Click the Next button on the pop-up.


The project will be sent to local HAT for packaging. You can see the progress in the Console View.

Once the packaging succeeds, on the popup that appears click the Browse… button, navigate to the suggested folder and select the file


Press button Deploy


The upload progress and result will be shown in the pop-up. In case of an error, follow the given hint to correct the error


Click the Close button

Logon to Hana Cloud Platform mobile services(HCPms). Go to the application com.test.prods and press button Configure


Navigate to tab App Specific Settings. The most recent deployment should be seen. Select it and press the Deploy button


7. Check for updates for the app on the Device

Logon to the device on which the app is installed. Open the app.


A New Update available message pops up. Press Relaunch Now to get the latest updates on the device.


You should now be able to see the newly added button


That’s it for today!




Preparation Steps:

1.      Setup Destination

Login to your hanatrial account and set up destination configuration for ES1 (to consume services).

In a browser login to –> Cockpit

Go to Destinations –> New Destination…

Enter the following Destination Configuration parameters:














And Additional Properties:







Save the configuration settings

2.      Start the HAT Connector

To allow Web IDE to interact with Hybrid App Toolkit add-on components on your local machine over HTTPS, start Hybrid App Toolkit Connector.

From the SAP_HAT_local-<version> folder: On Windows, double-click run.cmd, or type this command in a command window. On Macintosh, in a terminal window, first run chmod +x *.sh and then ./

At the prompt, enter the keystore password. This password is the same one entered during the HAT setup procedure. The Hybrid App Toolkit Connector starts and listens for requests from Web IDE.

3.      Enable HAT Plugin in SAP Web IDE and Verify

Login to SAP Web IDE. Ensure that Hybrid App Toolkit is enabled. Test and verify that the connection is up. 

In a browser login to https://webide-<your_user> where you need to replace the string “<your_user>” with your user account

  1. Go to Tools –> Preferences

  1. Select Plugins –> Optional Plugins. Select Hybrid App Toolkit.

Next select Hybrid Application Toolkit from the left Pane. Press button Test Connection. Ensure that Connection is up

4.      Install Kapsel SDK cli

Windows Installation
To install the CLI, open a terminal window and navigate to the Kapsel CLI folder. On Windows, the SDK installer installs the SDK by default in c:\SAP\MobileSDK3\, so the Kapsel CLI can be found in c:\SAP\MobileSDK3\KapselSDK\cli. With a terminal window open to the cli folder, issue the following command:

npm -g install

Macintosh OS X Installation
To install the CLI, open a terminal window and navigate to the Kapsel CLI folder. On OS X, the SDK installer installs the SDK by default in /users/user_name/SAP/MobileSDK3/ (replacing user_name with the login name for the user performing the installation), so the Kapsel CLI can usually be found in /users/user_name/SAP/MobileSDK3/KapselSDK\cli. With a terminal window open to the cli folder, issue the following command:

sudo npm -g install

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Hans Verreydt


    We’re working with HCPms (production environment), but when we use the “app update” feature, we always have a blank screen when we update the app on our device.

    Did you also have that issue when working on this?

    Many thanks!




Leave a Reply