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 | |||||||||||||||||||||||||||||||||||||
| Start SAP Web IDE | ||||||||||||||||||||||||||||||||||||
| Preferences pane displayed | ||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||
| In Plugin Repository, select “SAP Plugins”. | ||||||||||||||||||||||||||||||||||||
| Select to enable the “Hybrid App Toolkit plugin” and press “Save” button. | External Plugin is enabled | |||||||||||||||||||||||||||||||||||
| Refresh the browser | ||||||||||||||||||||||||||||||||||||
| Create New Project based on SAPUI5 Master Detail Kapsel Offline Applicaion Template | |||||||||||||||||||||||||||||||||||||
| New Project wizard opened | ||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||
| Specify a project name and press Next | ||||||||||||||||||||||||||||||||||||
| In Data Connection section, select “Service URL” and select “SMP IGW Service” for the Service Information from the list | ||||||||||||||||||||||||||||||||||||
| Enter user credentials as smpAdmin/s3pAdmin when prompted | Service is connected and display the collections in the Details section | |||||||||||||||||||||||||||||||||||
| press Next | ||||||||||||||||||||||||||||||||||||
| In Template Customization, fill-up the entries as below
| ||||||||||||||||||||||||||||||||||||
| Press Finish | New Master Detail Offline Project is created and displayed in Workspace. | |||||||||||||||||||||||||||||||||||
| Preview in SAP Web IDE | |||||||||||||||||||||||||||||||||||||
| Expand Project folder in Repository Browser | ||||||||||||||||||||||||||||||||||||
| Application Preview window open in a new browser tab | ||||||||||||||||||||||||||||||||||||
| 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 | |||||||||||||||||||||||||||||||||||
| 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 | |||||||||||||||||||||||||||||||||||||
| In SAP Web IDE, right-click on the project folder , select “Project Settings” context menu | ||||||||||||||||||||||||||||||||||||
| Select “Device Configuration” section in Project Setting | ||||||||||||||||||||||||||||||||||||
| Complete the device configuration with the following.Application Section
| ||||||||||||||||||||||||||||||||||||
| Press Save and Press Close in Project Setting Dialog | The project setting dialog is saved and closed. | |||||||||||||||||||||||||||||||||||
Run On - Android Device
| |||||||||||||||||||||||||||||||||||||
| In Repository Browser, select the Project | ||||||||||||||||||||||||||||||||||||
| 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 | ||||||||||||||||||||||||||||||||||||
| 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. | ||||||||||||||||||||||||||||||||||||
| Enter the following credentials to the SMP3 Logon Form in the application
| Successfully registers the application to the SMP3 Server and Passcode screen appears | |||||||||||||||||||||||||||||||||||
| 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 | |||||||||||||||||||||||||||||||||||
| Press on a row in Master page | Navigate to detail page displaying Product details and the Supplier information | |||||||||||||||||||||||||||||||||||
| Press Edit button in detail page | The product details page toggles to edit mode and display the Product data in an Edit Form. | |||||||||||||||||||||||||||||||||||
| Change the product price and press Save button | Data successfully changed and toggle the detail page from edit mode to read-only mode | |||||||||||||||||||||||||||||||||||
| Since the update is performed when the device in online mode, verify the changes in backend service | ||||||||||||||||||||||||||||||||||||
| Press Back button in Title bar | Page navigates back to Master Page. | |||||||||||||||||||||||||||||||||||
| 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) | |||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||
| Turn on Airplane mode in the more settings | Android device is now in Airplane mode | |||||||||||||||||||||||||||||||||||
| 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) | |||||||||||||||||||||||||||||||||||
| Press a row in Master page | Navigate to detail page displaying Product details and the Supplier information | |||||||||||||||||||||||||||||||||||
| Press Edit button in detail page | The product details page toggles to edit mode | |||||||||||||||||||||||||||||||||||
| Update product in the edit page and press save button. | Data saved and toggle the page to read mode
| |||||||||||||||||||||||||||||||||||
| Press plus icon on Master page | Blank Product form in create mode appears in detail page. | |||||||||||||||||||||||||||||||||||
| Add a new product data in the Product form and press Save buttonNote: Atleast enter values for ProductId, Name,Price, SupplierId, CurrencyUnit columns | New product created in offline store. | |||||||||||||||||||||||||||||||||||
| 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 | |||||||||||||||||||||||||||||||||||
| Turn-off airplane mode in the device. | Device connected back to network (Wifi/3G/4G) | |||||||||||||||||||||||||||||||||||
| Start the application again | Application started and pushed the changes persisted in the offline store to the backend. | |||||||||||||||||||||||||||||||||||
| 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)
- Double-click on “SAP Gateway Cockpit” icon in the desktop. It will open the SAP Gateway Cockpit on the browser
- Enter the admin credentials in the Gateway Cockpit logon screen and press Log On button.
- Select “DESTINATIONS” tab in the cockpit and press “New Destination” button
- Select “JPA” as destination type, “JPA” as destination name and “com.sap.espm.model” as Persistent Unit as below
- Click “Save” button. The new destination “JPA” is added.
- Select “SERVICES” tab and select the default “EspmService” to add a destination to this service.
- Click the hyperlink “EspmService” in the service list. It will open the Service details dialog as below
- Click “Add Destination” button and select “JPA” destination you added in step 4 and click “OK”. Click “Close” button to close the dialog.
- 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 cockpitAppendix – B: Setting Up Application on SMP3 ServerMake 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
- Logon to SMP3 Server admin console (https://<serverhost>:8083/Admin )
- Click on the Application tab in Admin console
- Click “New” button and fill-up the following in the new Application dialog
- Click Save button. The Application detail screen appears.
- Click “BACK END” tab and fill-up the backend end-point as https://<your smphost>:8083/gateway/odata/sap/EspmService;v=1/, as below
- Click “Add” button in SSO Mechanisms section and add the “Technical User (Basic)” SSO mechanism as below.
- Click “AUTHENTICATION” tab, select Existing Profile tab and select “default” as Profile name
- Click “Save” and click “Close” button. It will return to the Applications list page and the created application appears in the list as below
- 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.