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,
The updates for the app is seen as soon as we start the existing app and will look like this
Steps
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
At the bottom press button Add (with plus symbol), to create a new Application
Enter the following values:
Application ID | com.test.prods |
Version | 1.0 (default) |
Name | Products |
Type | Hybrid |
Description | Products |
Vendor | SAP |
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.
Ping the Connection to verify a successful Ping Result
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 Next
Enter a valid Project Name: Example ProductsAppUpdate, Press Next
In the Data Connection, chose es1 from the dropdown of Service Catalog.
If asked for authentication provide UserID/Pwd for es1
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
In SAP Web IDE, Right click on Project ProductsAppUpdate. Go to the Project Settings
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 |
From Plugins, select Kapsel Plugin Logon Manager and App Update
Enter the HCPms host : hcpms-<you_user>trial.hanatrial.ondemand.com
Save the Settings
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
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
Optionally, Run the index.html as a Web app to test the added button
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 packagedKapselApp.zip 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
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:
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 | |
ProxyType | Internet |
CloudConnectorVersion | 2 |
Authentication | NoAuthentication |
And Additional Properties:
WebIDEUsage | odata_abap |
WebIDEEnabled | true |
WebIDESystem | es1 |
Save the configuration settings
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.
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
Next select Hybrid Application Toolkit from the left Pane. Press button Test Connection. Ensure that Connection is up
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
35 | |
25 | |
14 | |
7 | |
7 | |
6 | |
6 | |
5 | |
4 | |
4 |