UI5 Application converted to .apk using PhoneGap Build when installed on Android shows blank screen.

  • 1
  • Question
  • Updated 4 years ago
I have converted an SAPUI5 application to .apk format using phonegap build . The app gets installed successfully on the Android device but then when I run the app it shows just a blank screen and the application runs perfectly on browser . So can you help me out with the issue?

And the folder structrure of WebContent is as shown in the below image .
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Could you please post your config.xml?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Screenshot of my config file is as shown in the image .
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. You are missing the whitelist plugin from npm: cordova-plugin-whitelist. Please read and apply its documentation.
2. You are using an old, deprecated barcode scanner plugin from the pgb repo. Please replace by the latest from npm.

(See the PGB Docs, Plugins section).

Also, you don't have any icons and splashes (recommended for Android, required for iOS).
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Yes i have not added the splashscreen and icon yet and also i would remove the barcode scanner.
But what is the purpose of using whitelist plugin ?
Is because of this reason that I am getting blank screen displayed?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If you are
- pulling code from the web (like css and/or js libraries
- navigating to an external url
- getting/posting data from/to a web service,
then you need those places whitelisted, otherwise you might see a white screen.

As I already wrote: Please read and apply its documentation. You may also want to have a look at the Whitelisting section of the PGB docs, first.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Ok I got what you said and I also read the documentation . Just having one question in my index.html i am downloading the resources from SAPUI5 site so after adding this plugins do i need to make change anywhere?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I don't know what SAPUI5 is, but if it supplies an external library, then yes, you need to set an allow-navigation rule for that. If you retrieve data through ajax/xhr, you need to set the server in an access origin rule.

Depending on whether or not yu are incuding a CSP, you need to whitelist external sources there, too.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
I have added the whitelist plugins now and the new config file is as shown below:-

Now when I am trying t run its showing an error whose screenshot is as shown below:-
So can you please help me with it as path to index.html would be mentioned in config.xml . So why is it not getting index.html from config file?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. It's the wrong plugin and the wrong source.
Replace by <plugin name="cordova-plugin-whitelist" />

2. It is getting the index.html. The error message indicates that the error takes place in index.html.

3. You may as well remove that content element from the config. That setting is the default.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Is there any rule for order of the tags of config file . for example :- I understood that we don't need to mention the content tag but if we are writing then is it compulsory to write content tag after the plugin tags or something like that?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No. The XML must conform to the "well formedness" rules, but othedwise the order of elements at the same nesting level is free.
(Edited)
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
And what if we don't mention the prefix gap in the plugins tag?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Then again the order of elements is free. After all, this is XML, and the namespace doesn't determine an element order.

Why would you still want to use the gap namespace?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
ok got it.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Even after doing all this I am getting the same error .

Can you please guide me further?

And my config.xml now is as follows:-
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What is issuing this error message? Is it in your code? Is it in a script you are loading externally?

(If you don't know, please make your zip file available on the web somewhere and post its url here, so I can have a look if you wish)
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
There is no way that I can provide you the zip since I can't even upload on drive So i am sending you the screenshot of all files So that you can have a look into that .
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That wouldn't enable me to see your directory structure.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
So can you suggest any way ?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Don't you upload a zip file to PGB? Do you use Github? Do you use the Phonegap API?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
I do upload a zip but that's from my system Not from github
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
After opening the .apk:-


Inside assets:-


Inside assets --> www:-

Inside res:-

If there is any way other than this please let me know I can provide you the zip.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
And yes there is config.xml inside the xml folder of res
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It doesn't matter what's in your apk. I would like to see the source zip file or Github repo in order to be able to help you and troubleshoot.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Ok I will put the code on github so that u can have a look into it . And then would let you know .
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Here is some feedback:

1. You don't have both index.html and config.xml in the root ("/"), where they should be. They are in in a directory called /WebContent
Easiest solution: just use the CONTENTS of that diectory as input for PGB.

2. You have no icons and splashes, which are highly recommended for Android and required for iOS

3. You don't have a reference to cordova.js in your index. You should add that.

4. You have getUrl("/sap/opu/odata/sap/Z_PASSWORD_RESET_DEMO_SRV_SRV/"),true);
That relative url starts with a slash, which means it's looking for the path from the device root. The mentioned path is not present in your assets.

5. You have (window.location.hostname == "localhost")
which will not evaluate to true on your device.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
In that case, you can only access that after receiving the 'deviceready' event. You would have to add an eventLstener for that event and make the getUrl() call in the callback function of that eventListener.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
ok but if I paste directly the URL which it has to access then it would work fine .right?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It's an external url. Since you are within an app in the webview, access is restricted, then whitelisted through the whitelist plugin.
This plugin is activated after cordova.js has been executed (it fires the deviceready event). Only then your external URL can be accessed from the webview, if properly whitelisted.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
ok so after adding reference to the cordova.js and then if I just specify the static URL instead of relative path and then if I just Upload the zip of webcontent
folder . Then is it ok? Or it would be neccessary to write deviceReady function?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
As said, you must wait for the deviceready event before using any plugin functionality, including whitelisting.
This is a Cordova requirement
http://docs.phonegap.com/en/4.0.0/cor...
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes


And now is it ok to use getUrl() function and have relative path .right?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
And I also use external link to get UI5 resources from the SAPUI5 website so is it ok if I give reference to those resources before deviceReady function call?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Where is your onLoad function being called?
2. Yes, the references will be evaluated and loaded if you have the whitelist plugin in your config and you have set the allow-navigation rule (which you have now)
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Calling of OnLoad function:-
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
is it ok ?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
OK.
Now, how does this test? Any success?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No, you should upload the CONTENTS of that directory, so as to have both index and config in the ROOT, not in any directory under the root.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
ok
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
But in PGB I can only upload one zip folder . So how can I upload all the contents . For that I would need to put all the contents in one folder and zip that folder . but again that would be same as making zip of webcontent folder. So how should it be done?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You can zip up a complete directory structure into one zip file, can't you?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Yes done.Thank you.
Now after testing I will let you know
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Still the same error is coming.
Please guide me further .
(Edited)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You need to find out which connection it is trying to use, and what the url is of the file/data it is attempting to load.

Googling for this message in combination with SAP UI5, I am getting the impression that a proxy-http url is attempted. If that is the case, whitelisting will not be sufficient for http:// and https://

Have you tried the SAPUI5 support forum? They might have heard of this situation and perhaps know an immediate solution.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Yes I have also posted the query on scn forum which for sap developers but they are also not getting any solution for this since they are not having idea about how to built using phonegap build.

And if we are using proxy then do we need to do any extra configuration or add some plugin or something?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I don't know, Mana.
In this case, I would just be googling for the error message and trying to understand given solutions, if any. But first, I would see what kind of URL is generated by that getURL() method in your script. That would give me more information on what to google for.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Right now I got one solution regarding the error that I am facing

So right now I am trying this solution and would see if it works out for me. and then would let you know if any progress is there.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
The firstpage is being displayed now but when I click on button to move to next page it doesnot navigate to next page . Can you help me out with that? And I have set the load-url-timeout to 70000 . So can that be the reason that the page was taking more time to load?

and another problem is that I have added icon to my app but it does not get displayed still the one that is provided by default comes.
The icon gets displayed here


But then when I download they apk and install it I get the default icon . Why is it so?

And the screenshot of my config file is as folows:-


And yes my icons are stored inside www/image folder.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The page transition stuff is hard for me to assist with, because it requires knowledge of your SAP framework. I can't simply tell what all these objects and methods do, because I have no documentation of that framework.
For instance:
var app = new sap.m.App({initialPage:"idPassword_reset1" , id:"app"});
var page = sap.ui.view({id:"idPassword_reset1", viewName:"password_reset.Password_reset", type:sap.ui.core.mvc.ViewType.XML});
var page1=sap.ui.view({id:"generate_validate_rcode", viewName : "password_reset.Generate_Validate_R_Code" , type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page).addPage(page1);
app.placeAt("content");


This is probably something you would have to ask at SAPUI5 forums, because it's no Phonegap Build issue. After all, yur app builds, now.

About the icon:
- your height and width values are syntactically incorrect. Should be numeric
- I have not checked the actual dimensions of the graphics. Are they as defined by Google?
http://developer.android.com/guide/pr... (halfway that page)
- would be helpful to specify the icons in config using a qualifier (i.e. 'xxhdpi') as described in the Icons and Splashscreens section of the PGB docs.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
And where should the icons be actually placed . Is it ok if icons are inside the images folder of the Webcontent?
Because when i placed them inside my image folder of Webcontent my icons where not replaced by the default icons in the res folder of the apk,

And yes regarding height and width the height and width is same as the size of icon .
I referred this link:-
http://stackoverflow.com/questions/12...

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
And where should the icons be actually placed
Wherever you like. It's OK, as long as the paths in config are valid references.
But the values height/width in your config are invalid, and you should set the qualifier for screen size. Also, in your Github repo, I dodn't see any icons for xxhdpi or xxxhdpi
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
I didn't get your point . Actually I am not using ajax to call the webservice
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Then what are you using to access the application server, if not with ajax? Are you trying a socket?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
can know how the PhoneGap Build works? imean if pgb server once calls application server to load the application's first page then if we have to navigate to second page then again it would make call to pgb's server?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What "PGB server"?
Once the app is built, there is nothing Phonegap Build will do with the app at execution time. PGB will certainly not call your application server, because PGB is not "active" in your app at execution time.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
ok
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes


Can you help me to solve this issues?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. a CSP is not really required, but if you wish to add one, feel free to do so. See the whitelist plugin documentation for first information.

2. Your object oModel is apparently not defined. Since this object has nothing to do with PGB, you will have to find the cause in your code or the UI5 framework. How do you generally debug your alpha test versions?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
We actually debug it through USB debugging and we tried to do that but the problem is we have already defined the oModel still its showing this error.
This is how we have defined Odata :-


And the error is shown on the following code :-

oModel.read("http://hilsaps02bt.global.enterprise:... eq '"+Username+"' and Systemid eq '"+Systemid+"' and Clientno eq '"+Clientno+"'", null, null,true,fsuccess);
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
So basically when we try to connect to the server where our Odata service lies this error is shown .
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This is how we have defined Odata
(most likely oModel instead of oData was meant)

Well, yes, you have an instantiation of the oModel object. But if sap.ui.model.odata.ODataModel() doesn't return an object, oModel would still be undefined.
So, you must find out why that is the case. My guess is that the mentioned url in the parameter can't be reached.
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
The mentioned URL is absolutely correct we have already checked that that link can be reached from browser but somehow that link does not work when called from app.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Have you whitelisted that server in your config, and are you waiting for the deviceready event to fire before attempting such call?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
this is my config.xml:-


Do I need to make any change in config file for whitelisting the server?
And I have written the code to make connection to the Odata service inside DeviceReady Function.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Looks OK. If you dn't have a CSP which prohibits the connection, it should connect.
Still, you would have to check what is returned by said instantiation of the object.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
for accessing that URL you need to login from the client VPN
How is the app logged in through a VPN?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
No you can open the app without VPN's connectivity but then to connect the app to the server where the webservice resides you need to log in through the VPN .
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
So you must be connected to VPN inorder to access that URL
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
And....is the app indeed connected to VPN at the moment you try to instantiate that object?
Photo of Mana

Mana

  • 68 Posts
  • 0 Reply Likes
Yes the app would be connected to VPN at the time when we would try to access that link.