Skip to Content
Author's profile photo Ashwin Katkar
Ashwin Katkar
February 12, 2016 6 minute read

Master/Detail Kapsel Offline Application

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. 1.  
Start SAP Web IDE
  1. 2.  
  2. Press ToolsàPreferencesmenu
 Preferences pane displayed
  1. 3.  
  2. Select Pluginsà Optional Plugins in preferences pane
  1. 4.  
In Plugin Repository, select “SAP Plugins”.
  1. 5.  
Select to enable the “Hybrid App Toolkit plugin” and press “Save” button. External Plugin is enabled
  1. 6.  
Refresh the browser
Create New Project based on SAPUI5 Master Detail Kapsel Offline Applicaion Template
  1. 7.  
  2. Press File àNew àProject from Templatemenu
 New Project wizard opened
  1. 8.  
  2. Select “SAPUI5 Mobile Applicationsà SAPUI5 Master Detail Kapsel Offline Application” template and press Next
  1. 9.  
Specify a project name and press Next
  1. 10.
 In Data Connection section, select “Service URL” and select “SMP IGW Service” for the  Service Information from the list
  1. 11.
 Enter user credentials as smpAdmin/s3pAdmin when prompted Service is connected and display the collections in the Details section
  1. 12.
 press Next
  1. 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
  1. 14.
 Press Finish New Master Detail Offline Project is created and displayed in Workspace.
Preview in SAP Web IDE
  1. 15.
 Expand Project folder in Repository Browser
  1. 16.
  2. Select index.html and press Run à Run menu
 Application Preview window open in a new browser tab
  1. 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
  1. 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
  1. 19.
 In SAP Web IDE, right-click on the project folder , select “Project Settings” context menu
  1. 20.
 Select “Device Configuration” section in Project Setting
  1. 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. 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>

  1. 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.
  1. 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.
  1. 23.
 In Repository Browser, select the Project
  1. 24.
  2. 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
  1. 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.
  1. 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
  1. 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
  1. 28.
 Press on a row in Master page Navigate to detail page displaying Product details and the Supplier  information
  1. 29.
 Press Edit button in detail page The product details page toggles to edit mode and display the Product data in an Edit Form.
  1. 30.
 Change the product price and press Save button Data successfully changed and toggle the detail page from edit mode to read-only mode
  1. 31.
 Since the update is performed when the device in online mode, verify the changes in backend service
  1. 32.
 Press Back button in Title bar Page navigates back to Master Page.
  1. 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)
  1. 34.
  2. In the Android device, choose Settings àWireless and network àMore settings
  1. 35.
 Turn on Airplane mode in the more settings Android device is now in Airplane mode
  1. 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)
  1. 37.
 Press a row in Master page Navigate to detail page displaying Product details and the Supplier  information
  1. 38.
 Press Edit button in detail page The product details page toggles to edit mode
  1. 39.
 Update product in the edit page and press save button. Data saved and toggle the page to read mode

  1. P.S. Since the device is in airplane mode, the data persist in the offline store & will be synced when device gets a connectivity.
  1. 40.
 Press plus icon on Master page Blank Product form in create mode appears in detail page.
  1. 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.
  1. 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
  1. 43.
 Turn-off airplane mode in the device. Device connected back to network (Wifi/3G/4G)
  1. 44.
 Start the application again Application started and pushed the changes persisted in the offline store to the backend.
  1. 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
  1. Enter the admin credentials in the Gateway Cockpit logon screen and press Log On button.

  1. Select “DESTINATIONS” tab in the cockpit and press “New Destination” button
  1. Select “JPA” as destination type, “JPA” as destination name and “com.sap.espm.model” as Persistent Unit as below

  1. Click “Save” button. The new destination “JPA” is added.
  1. Select “SERVICES” tab and select the default “EspmService” to add a destination to this service.

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

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

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

  1. Click on the Application tab in Admin console

  

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

             

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

  1. Click “Add” button in SSO Mechanisms section and add the “Technical User (Basic)” SSO mechanism as below.
  1. Click “AUTHENTICATION” tab, select  Existing Profile tab and select “default” as Profile name

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

  

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

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.