Previous Home Next
Where to Get Help with Cordova Questions
Monitoring and Modifying HTTP and HTTPS Requests
Setting the Session Timeout for the Management Cockpit
Sharing Your Device's Screen
Accelerating the Android Emulator
Wireless ADB Connection to an Android Device
Proxy Settings on Android
iOS 7 Status Bar Overlays the App
Simple Customizations
Opening URL's
Miscellaneous Tips
Where to Get Help with Cordova Questions
There is an active forum on PhoneGap/Cordova at
PhoneGap Forum.
The list of known Cordova issues can be searched at
Apache Cordova Issue Tracker.
The Cordova mailing lists can be searched at
Apache Cordova Mailing Lists.
The
Apache Cordova Blog section often highlights important changes and lists bug fixes that are in a particular release.
Searching for Kapsel or "Fiori Client on the
SAP Notes website and then searching by release date will show a list of known problems.
Monitoring and Modifying HTTP and HTTPS Requests
It can be useful to examine the network calls made between an application and the server. The following shows how this can be accomplished using Fiddler.
Device Trace with Fiddler
Android
iOS
Additional Fiddler Tips
Network Trace using the Server
Device Trace with Fiddler
It is possible to use
Fiddler to capture traffic between a mobile device and the SAP Cloud Platform Mobile Services or SMP server. The following instructions will demonstrate how to do this with an Android or iOS device.
- In Fiddler choose Tools > Fiddler Options > Capture HTTPS Connects > Decrypt HTTPS traffic > from all processes.
![](/legacyfs/online/storage/blog_attachments/2017/05/https.png)
- Configure Fiddler to permit remote devices to route traffic through it.Go to Tools > Telerik Fiddler Options > Connections
Check "Allow remote computers to connect".Uncheck "Act as system proxy on startup". This setting is not needed when capturing communications of a device that is proxying through fiddler.![](/legacyfs/online/storage/blog_attachments/2017/05/fiddlerSettings.png)
- Restart Fiddler.
- Determine the IP address of the machine that is running Fiddler by running ipconfig from a command prompt.
![](/legacyfs/online/storage/blog_attachments/2017/05/myProxy.png)
Android
iOS
Additional Fiddler Tips
- Using Fiddler, a rule can be introduced in the OnBeforeRequest method to load a modified HTML page. This could be used for example if you do not have access to the web server that is hosting the page but wish to make changes to a file it serves.Choose Rules > Customize Rules and edit the OnBeforeRequest method.
if (oSession.uriContains("FioriLaunchpad.html")) {
oSession["x-replywithfile"] = "c:/temp/FioriLaunchpad.html";
}
- It could also be used to remove certain files or load them from another location.
if (oSession.uriContains("core-ext-light.js")){
oSession.oRequest.FailSession(404, "Blocked", "Fiddler blocked core-ext.js file");
}
if (oSession.uriContains("core-min-0.js")) {
oSession.fullUrl = "https://sapui5.hana.ondemand.com/1.28.30/resources/sap/fiori/core-min-0.js";
}
- The following rule would enable you to access a proxied Fiori app URL in a regular browser on a device.
if (oSession.host.ToLower() == "mobile-abcdefg.us1.hana.ondemand.com" ) {
oSession.oRequest["X-SMP-APPCID"] = "0abcdef-7a2b-42fa-bfb3-3ffb68b1c099";
}
Network Trace using the Server
Both the SMP server and the SAP Cloud Platform Mobile Services server offer the ability to trace network requests it receives and sends out. The network trace is recorded in an HAR archive that can be imported into a viewer such Fiddler as shown below.
- Enable network tracing.
On SMP this can be found under Logs, Network Traces, Log while on the SAP Cloud Platform Mobile Services this can be found under Analytics, Network Traces.
![](/legacyfs/online/storage/blog_attachments/2017/05/image1-5.png)
- In an application, make a request of the server such as a proxied OData request.
![](/legacyfs/online/storage/blog_attachments/2017/05/image1b.png)
- Turn off the network tracing
- Export the network trace as download type HAR. Note will likely have to change the To date filter before pressing the download button.
![](/legacyfs/online/storage/blog_attachments/2017/05/image1c.png)
- Import the trace file into Fiddler. Choose File, Import Sessions..., choose HTTPArchive from the dropdown and browse to the tracelog.har file.
![](/legacyfs/online/storage/blog_attachments/2017/05/image1d.png)
- Notice that both the request made from the Kapsel app to the server and the request made from the server to the OData backend is shown.
![](/legacyfs/online/storage/blog_attachments/2017/05/image1e.png)
Setting the Session Timeout for the Management Cockpit
The duration after which the Management Cockpit by default times out and requests the user to log in again is 20 minutes from the last use. This value can be changed by modifying the
session-timeout
setting in the following file and restarting the SMP 3.0 server.
C:\SAP\MobilePlatform3\Server\config_master\org.eclipse.gemini.web.tomcat\web.xml
Note that if the same browser that is hosting the Management Cockpit is also used to say invoke a REST call against the SMP 3.0 server and uses a different security profile, the Management Cockpit is logged out. An example of this is using the Chrome Advanced Rest Client to send a push notification as described in the section
Push.
Sharing Your Device's Screen
It can be useful to view your device's screen on a computer and or to make a recording. There are multiple ways to accomplish this. Here are a few programs that may be helpful.
Note that as of SP 11, the Fiori Client includes the cordova-plugin-privacyscreen plugin which disables screen sharing on Android.
Android
Vysor can be installed as an app for Chrome. It enables an Android's screen to be shown that is connected via adb in a resizable window. It enables the computer to control the device using the mouse and enter text using the keyboard. Finally, one additional feature is the ability to remotely control a device. To use it install
Vysor as an app in Chrome. Establish an adb connection to your device. In Chrome, enter the below URL.
chrome://apps/
Click on Vysor and then you should see your device listed.
Android Studio can also be used to capture the device's screen and save it as an MP4 file. In Android Studio, in the logcat tab of the Android Monitor, click on the icon for Screen Record.
iOS
Connect your iOS device to a Mac and start the QuickTime Player and choose File, New Movie Recording. Under the Camera, select your connected device. The device's screen will now appear on the Mac and the created recording can be saved.
Windows
Install the
Project My Screen app on your Windows computer. Start it with your Windows Phone connected to your computer.
Wireless ADB Connection to an Android Device
It is possible to connect wirelessly to an Android device that was previously configured to enable this.
With a USB connected Android device enter the following commands.
adb tcpip 5555
adb connect ip_address
The Android device's IP address can be found under Settings > WI-FI > Click on the button in the top right with three dots > Advanced > Scroll down to IP address. To switch back to adb usb mode enter the following.
adb usb
Accelerating the Android Emulator
There are two ways that the Android emulator can be configured to run faster. The first way uses graphics acceleration to increase the redraw rate of the emulator. It can be enabled by checking Use Host GPU
Note you may run into screen redraw issues after enabling this option.
The second way is to use virtual machine acceleration. This requires the download of the Intel Hardware Accelerated Execution Manager.
It then needs to be installed.
C:\Android\adt-bundle-windows-x86_64-20130729\sdk\extras\intel\Hardware_Accelerated_Execution_Manager\IntelHaxm.exe
An Android X86 based image, Intel Atom (x86) must be selected.
Note that after starting the emulator; the following message appears indicating that it is working correctly.
For additional details see
Using Hardware Acceleration.
Note, if you are unable to install IntelHaxm, you may need to remove the following setting in Control Panel > Programs and Features > Turn Windows Features on or off > Uncheck Hyper-V.
Note this has a side effect of disabling the Windows Simulators.
Proxy Setting for Android
If you use a proxy server, the Android emulator can be configured under Settings > More > Mobile Networks > Access Point Names. Note these steps only apply to 4.x emulators and not 5.x emulators.
For 5.x and higher emulators, the proxy value is taken by the http_proxy and https_proxy environment variables or it can be passed in via the command line such as the following.
emulator -avd Android6 -http-proxy http://proxy_server:proxy_port
To set the proxy settings for an Android device that is using WIFI, go to Settings > Wireless and Network > Wi-Fi Settings > Long press on the Wi-Fi network > Check the Show Advanced Options.
A quick way to test if the proxy settings are working is to open the browser and attempt to access a web site such as
http://www.google.com.
iOS 7 Status Bar Overlays the App
If your app runs on iOS 7 you may need to add a 20 pixel top margin so that the status bar does not overlay the main screen of the application.
The Status Bar Issue describes the problem in more detail and contains the following solution.
document.addEventListener('deviceready', onDeviceReady, false);
function init() {
if (parseFloat(window.device.version) >= 7.0) {
document.body.style.marginTop = "20px";
}
}
A SAPUI5 specific solution is shown below.
html[data-sap-ui-os^="iOS7"] .sapMBar {
border-top-color:#F2F2F2;
border-top-style:solid;
border-top-width:20px;
}
Perhaps a better way to address this is to use the
cordova-plugin-statusbar plugin.
cordova plugin add cordova-plugin-statusbar
Then modify the config.xml file and set the StatusBarOverlaysWebView to false.
Simple Customizations
There are a few easy ways to quickly customize your app including adding a gradient, removing the default Cordova splash screen and changing the app icon. Additional information on app icons and splashscreens can be seen at
Splashscreen.
- To add a gradient, use a tool like Ultimate CSS Gradient Generator to generate a line of CSS that can be added to the top of your index.html.
<head>
<style>
body {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef));}
</style>
- To change the splash screen on iOS, left-click on the Project > Target > scroll to Launch Images, right-click on the image that matches the device type being used and choose open with Finder. Replace that image with a new image that has the appropriate resolution. The same approach can be followed to change the app icon.
- To change the app icon on Android, replace the icon image with a new image that has the appropriate resolution. The icon images are in the following folder.
project_name\platforms\android\res\drawable-xxxx.
Note that cleaning the project may be necessary after changing the icon or splash screen.
Opening URL's
To open an external URL from index.html, the
Cordova InAppBrowser plugin can be used. URL's opened in the InAppBrowser are opened in a separate window from the WebView used to display the current running application. InAppBrowser windows also do not have access to the plugins added to a project.
<script>
function showURL(url) {
var URLToOpen = encodeURI(url); //may be needed if URL contains parameters
var ref = window.open(URLToOpen, '_blank', 'location=yes,toolbar=yes,toolbarposition=top'); //toolbar options are iOS only
//Note on Android, some attachment types such as PDF, XLS, DOCX can be opened by changing '_blank' to '_system'
//The appropriate viewer would need to be installed and it may help to have a file manager program like ES File Explorer installed
}
</script>
<a href="javascript:void(0);" onclick="showURL('http://www.google.com')">www.google.com</a>
This will open a new window showing the web site
www.google.com. When the window is closed, the Kapsel app will regain focus.
Note that local HTML files can simply be opened using
<a href="accounts.html">Open Accounts</a>
Note that on Android, if the resource does not exist and the link is clicked on the app will close. To instead shown an error screen, modify the config.xml file under the res/xml folder to include a preference setting indicating an error page to open.
<preference name="errorUrl" value="file:///android_asset/www/error.html" />
See
Android Configuration for additional details.
Miscellaneous Tips
- Sometimes in Xcode it is necessary to perform a more complete clean of a project. This can be performed by holding the Alt key when selecting the Product menu. The Clean menu item changes to Clean Build Folder...
- If a permissions error occurs on a Mac, a files permissions can be seen via the finder menu item Get Info in the Sharing & Permissions. To change the permissions of a folder and its children the following command can be used.
sudo chown -R user_name /Users/UserName/folder name
- The iOS simulator can be reset to a clean state. This can be performed by choosing iOS Simulator > Reset Content and Settings...
- To delete an app on iOS, long press on the app icon.
- An iOS app can be removed from memory by pressing the home button twice quickly. On iOS 7 swipe the app up to remove it.
- See Getting Started in Simulator for details on things such as how to rotate, drag and pinch.
- A linker error may occur if the Deployment Target is changed from 6.0 to 7 or 8 on an Xcode project that contains the Logon plugin. This can be corrected by adding the library "libstdc++.6.0.9.dylib". Under the General tab for the project, click on the + sign in the Linked Frameworks and Libraries section and add "libstdc++.6.0.9.dylib".
- An Android app can be uninstalled or reset to a newly deployed state via Settings > Apps > App > Uninstall or Clear Data. A quicker way to do this is to long press on the app and then drag the icon to Uninstall or App Info.
- If the application running in an Android emulator takes a while to load it may be necessary to increase the loadUrlTimeout value. This can be set in the Java class for the plugin.
public class LogonDemo extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.setIntegerProperty("loadUrlTimeoutValue", 60000); //add this line.
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
super.loadUrl(Config.getStartUrl());
//super.loadUrl("file:///android_asset/www/index.html")
}
}
See also Android Configuration.
- Occasionally the logcat view stops displaying messages from the attached Android or simulator. Sometimes, switching to the DDMS perspective and clicking on a few entries in the Devices view corrects this. Also, make sure that no filters or regular expressions are being accidentally applied.
- If the SMP 3.0 Management Cockpit fails to open, one reason may be that another process is using port 8083. To view which process is using port 8083 enter
netstat -ano | findstr 8083
TCP [::]:8083 [::]:0 LISTENING 8092
Using the above information, we can see that a process with the process ID of 8092 is using port 8083. Open the task manager on windows and add the PID column and check Show processes from all users to find the process that is using port 8083. The SMP 3.0 server should appear as a java.exe process and a description of SAP Java VM Runtime binary.
- In the Xcode All Output view you may see the following message.
Started backup to iCloud! Please be careful.
Your application be might rejected by Apple if you store too much data.
This setting is controlled by the preference setting BackupWebStorage which is set by default to cloud in the config.xml file.
See also iOS Configuration.
- If you are doing Android development on a Mac and wish to create a new Android emulator running android for me opens the Android SDK Manager without any menus. If instead it is opened with
nohup android &
the terminal window can be closed and then the Android SDK Manager menu appears.
- If you need to enter text on an Android device and wish to use your computers keyboard, try the following.
adb shell input text some_text_to_enter
- The Cross-Origin setting of the SMP 3.0 SP 11 server can be configured. Click on System, Cross-Origin Resource Sharing Configuration and enter *.
- If you have a tip that isn't listed here that others would benefit from please mention it in the comments section below.
Previous Home Next