Re: HTTP Status 404-Not Found

Step

Actions

Expected Results

Enable “Hybrid App Toolkit” External Plugin

1. 1.   

Start SAP Web IDE

1. 2.   
2. Press ToolsàPreferences menu

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 Template menu

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

Master Section

Master Data Fields

Detail Section

Create/Edit Section

Information Section

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

Platforms

Plugins

SMP Server

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 select Runà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

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.