Skip to Content

Introduction

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

Objective

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
26Relaunch.png

Prerequisites

  • 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


Steps

1. Create an application on HCPms

Logon to https://hcpmsadmin-<your_user>trial.dispatcher.hanatrial.ondemand.com where you need to replace the string “<your_user>” with your user account

Click on Applications Tile

0LogonToMobileServicesCockpit.png

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

0_1LogonToMobileServicesCockpit.png

Enter the following values:

Application ID

com.test.prods

Version

1.0 (default)

Name

Products

Type

Hybrid

Description

Products

Vendor

SAP

0_2LogonToMobileServicesCockpit.png

Save the settings

Select tab Backend and enter the following:

Backend URL

http://sapes1.sapdevcenter.com:8080/sap/opu/odata/sap/ZGWSAMPLE_SRV/

Authentication Type

No Authentication

Proxy Type

Internet

Leave the rest of the default values as is.

0_3LogonToMobileServicesCockpit.png

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

3ProjectFromTemplate.png

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


6TemplateCustomizzation.png 

7TemplateCustomization.png

8TemplateCustomization.png

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

10RunAppInWeb.png

3.      Device Configuration

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

11_1DeviceConfiguration.png

Go to Device Configuration and enter the following:

App Name

Products

App ID

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

Description

Products

Version

1.0.0

Platforms

Android

11DeviceConfiguration.png

From Plugins, select Kapsel Plugin Logon Manager and App Update

Enter the HCPms host : hcpms-<you_user>trial.hanatrial.ondemand.com

11DeviceConfiguration2.png

Save the Settings

4. Deploy and Run on Device

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

12DeployToLocalHat.png

On a successful deployment a success message appears

13SuccessfulDeplo.png

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

14_2Compressed.jpg

Disable Passcode and press Submit

/wp-content/uploads/2015/06/14_03_721685.png

The Main View with all the products should appear

/wp-content/uploads/2015/06/14_4_721686.png

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


<contentRight>

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

</contentRight>

Save the content

15ContentChange.png

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

16RunAsWebApp.png


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.

17_0OpenConsole.png

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

17DeployToHCPms.png


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

18AuthenticationRequired.png

Click the Next button on the pop-up.

19DeployToHCPms.png

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 packagedKapselApp.zip file

20PackagedKapselApp.png

Press button Deploy

21Deploy.png

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

22Deployed.png

Click the Close button

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

23Configure.png

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

24SelectAndroidVersionDeploy.png


7. Check for updates for the app on the Device

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

25GoToAppOnDevicec.png

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

26Relaunch.png

You should now be able to see the newly added button

27UpdateAvailable.png

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 https://account.hanatrial.ondemand.com/ –> Cockpit

Go to Destinations –> New Destination…

Enter the following Destination Configuration parameters:

Name        

es1

Description

es1

Type

HTTP

URL

http://sapes1.sapdevcenter.com:8080

ProxyType

Internet

CloudConnectorVersion

2

Authentication

NoAuthentication

And Additional Properties:

WebIDEUsage

odata_abap

WebIDEEnabled

true

WebIDESystem

es1

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 ./run.sh.

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>trial.dispatcher.hanatrial.ondemand.com/ 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

    Hi,

    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!

    Regards,

    Hans

    (0) 

Leave a Reply