Master/Detail Kapsel Offline Application

[AshwinKatkar]

Prerequisites

• Make sure you have an OData service which supports CRUD operations and the service has been configured as HCP destination to access it from SAP Web IDE.
• Make sure you have setup Hybrid App Toolkit environment (all prerequisites, including MobileSDK3 SP06) in your local machine. To setup Hybrid App Toolkit, refer tohttps://help.hana.ondemand.com/webide_hat/frameset.htm.
• You have started the Hybrid Toolkit Connector and is listening to port 9010
• You have configured an Hybrid Application in SMP3 Server based on the backend URL you are going to use to create the Offline Application

Step	Actions	Expected Results
	Enable “Hybrid App Toolkit” External Plugin
1.	Start SAP Web IDE
2.   Press ToolsàPreferencesmenu		Preferences pane displayed
3.   Select Pluginsà Optional Plugins in preferences pane
4.	In Plugin Repository, select “SAP Plugins”.
5.	Select to enable the “Hybrid App Toolkit plugin” and press “Save” button.	External Plugin is enabled
6.	Refresh the browser
	Create New Project based on SAPUI5 Master Detail Kapsel Offline Applicaion Template
7.   Press File àNew àProject from Templatemenu		New Project wizard opened
8.   Select “SAPUI5 Mobile Applicationsà SAPUI5 Master Detail Kapsel Offline Application” template and press Next
9.	Specify a project name and press Next
10.	In Data Connection section, select “Service URL” and select “SMP IGW Service” for the  Service Information from the list
11.	Enter user credentials as smpAdmin/s3pAdmin when prompted	Service is connected and display the collections in the Details section
12.	press Next
13.	In Template Customization, fill-up the entries as below Project Namespace md (its optional) Master Section Title Product List OData Collection Product Search Placeholder Search Search Tooltip Search for items in list Search Field Name Master Data Fields Item Title Name Numeric Attribute Price Units Attribute CurrencyCode Detail Section Title Product Details Additional Attribute1 Category Additional Attribute2 ShortDescription Create/Edit Section Create Input for Key Columns Selected Information Section OData Navigation SupplierDetails Navigation Attribute1 SupplierName Navigation Attribute2 EmailAddress Navigation Attribute3 Country Press Next
14.	Press Finish	New Master Detail Offline Project is created and displayed in Workspace.
	Preview in SAP Web IDE
15.	Expand Project folder in Repository Browser
16. Select index.html and press Run à Run menu		Application Preview window open in a new browser tab
17.	When prompted for user credentials in Application Preview window, enter smpAdmin/s3pAdmin and click Logon.	Application loads the data in the Application preview view window based on the attributes configured in Template customization section
18.	Click on a List item in left-hand side	The right-hand side frame loads the detail screen based on the clicked row
	Configure Project Settings for  Hybrid Mobile App
19.	In SAP Web IDE, right-click on the project folder , select “Project Settings” context menu
20.	Select “Device Configuration” section in Project Setting
21.	Complete the device configuration with the following. Application Section App Name <specify a name> App ID <specify the app id configured in SMP3 Server> Description <enter some app description> Version 1.0.0 Platforms On Windows Select Android only On Mac Select iOS and Android (if you have both) Plugins Cordova Device, Network Connection Kapsel Logon Manager, Offline OData SMP Server Host <specify your SMP hostname or ip address> Port <specify your connection port> Note: Master/Detail Hybrid application retrieves data from SMP server and hence, Application ID needs to be setup on a SMP Server and the same Application ID needs to be specified in the Project Settings à Device Configuration.
22.	Press Save and Press Close in Project Setting Dialog		The project setting dialog is saved and closed.
	Run On - Android Device To run on Android device, Android device is connect to the laptop through USB cable You must have installed Google USB driver from Android SDK Manager.
23.	In Repository Browser, select the Project
24. Right click on the project and selectRun à Run On  àAndroid Device menu			Web IDE issues a command to local Hybrid Connector server to create a Cordova project and Web IDE console display the log messages from the connector about the progress
25.	Project compiled and .apk file is generated, installed and launched on  Android device In the launched application, SMP3 Logon Form appears as a first screen.
26.	Enter the following credentials to the SMP3 Logon Form in the application User smpAdmin Password s3pAdmin Security Config default And press Register button		Successfully registers the application to the SMP3 Server and Passcode screen appears
27.	Press “Disable Passcode” button and press “Submit” button		Successfully logon to the SMP3 server and the application’s Master page appears with Product List data
28.	Press on a row in Master page		Navigate to detail page displaying Product details and the Supplier  information
29.	Press Edit button in detail page		The product details page toggles to edit mode and display the Product data in an Edit Form.
30.	Change the product price and press Save button		Data successfully changed and toggle the detail page from edit mode to read-only mode
31.	Since the update is performed when the device in online mode, verify the changes in backend service
32.	Press Back button in Title bar		Page navigates back to Master Page.
33.	Press Back button on the Android Device (phone or tablet) until the application closed		Application closed and Android device home screen appears
	Run in Airplane mode – on Android Device (Offline mode)
34. In the Android device, choose Settings àWireless and network àMore settings
35.	Turn on Airplane mode in the more settings		Android device is now in Airplane mode
36.	Go back to the Home screen and run the application		The application now retrieves the data from Offline store and function properly as before (when it is in online mode)
37.	Press a row in Master page		Navigate to detail page displaying Product details and the Supplier  information
38.	Press Edit button in detail page		The product details page toggles to edit mode
39.	Update product in the edit page and press save button.		Data saved and toggle the page to read mode P.S. Since the device is in airplane mode, the data persist in the offline store & will be synced when device gets a connectivity.
40.	Press plus icon on Master page		Blank Product form in create mode appears in detail page.
41.	Add a new product data in the Product form and press Save button Note: Atleast enter values for ProductId,  Name,Price, SupplierId, CurrencyUnit columns		New product created in offline store.
42.	Verify the changes in the back-end data		The changes are not pushed to the back-end and hence the changes are not reflected in the back-end data
43.	Turn-off airplane mode in the device.		Device connected back to network (Wifi/3G/4G)
44.	Start the application again		Application started and pushed the changes persisted in the offline store to the backend.
45.	Verify the changes in back-end		Changes are available in the back-end now.

Appendix – A: Setting Up Gateway Service (IGW) on SMP3 Gateway CockpitIf you have installed your own SMP3 (SAP Mobile Platform) Server in your local environment, then you will have SAP Gateway Cockpit icon added to your desktop. The following steps describe the setting up an odata service on SAP Gateway Cockpit. Makesure you already started the SAP Mobile Platform service (SMP3 service)

1. Double-click on “SAP Gateway Cockpit” icon in the desktop. It will open the SAP Gateway Cockpit on the browser

2. Enter the admin credentials in the Gateway Cockpit logon screen and press Log On button.

3. Select “DESTINATIONS” tab in the cockpit and press “New Destination” button

4. Select “JPA” as destination type, “JPA” as destination name and “com.sap.espm.model” as Persistent Unit as below

5. Click “Save” button. The new destination “JPA” is added.

6. Select “SERVICES” tab and select the default “EspmService” to add a destination to this service.

7. Click the hyperlink “EspmService” in the service list. It will open the Service details dialog as below

8. Click “Add Destination” button and select “JPA” destination you added in step 4 and click “OK”. Click “Close” button to close the dialog.

9. Click “Open Service Document” link in the service list. This will open the service document in a browser. Enter SMP admin user credentials when prompted. It will list the service collections as below

   This completes the setting-up of IGW odata service on SMP3 Gateway cockpit Appendix – B: Setting Up Application on SMP3 Server Make sure that you have added the certificate of the SMP3 Gateway server to the SMP 3.0 server before setting up the Application on SMP3 server.  To add a certificate, refer to http://danielva-xpvm.dhcp.oak.sap.corp/webworkflows/Getting_Started/index.html#odatademo

1. Logon to SMP3 Server admin console (https://<serverhost>:8083/Admin )

2. Click on the Application tab in Admin console

3. Click “New” button and fill-up the following in the new Application dialog

4. Click Save button. The Application detail screen appears.

5. Click “BACK END” tab and fill-up the backend end-point as https://<your smphost>:8083/gateway/odata/sap/EspmService;v=1/, as below

6. Click “Add” button in SSO Mechanisms section and add the “Technical User (Basic)” SSO mechanism as below.

7. Click “AUTHENTICATION” tab, select  Existing Profile tab and select “default” as Profile name

8. Click “Save” and click “Close” button.  It will return to the Applications list page and the created application appears in the list as below

9. Click the “ping” button to verify the back-end URL is reachable from SMP3 Server as below

This completes the steps to setup Application on your own SMP server.