Combining a phonegap/cordova app with AB app

Hi all,Apologies for a vague question, I posted it since I thought some one might have done it before.We have a project developed by HTML, CSS and Jquery that compiles by Apache Cordova. We are planning the expand the project and I was wondering is there a way that we can build, lets say a two page application with AB and merge it with the app we have. Or else, is it possible to import our app (it is quiet large) into AB some how. My colleague has already tried to merge a sample AB app with the other but no success yet and it throws a lot of errors! any piece of advice? App builder is so fantastic that when start using it you don't want to get back to what you used to do by any means possible :)Kind regards,

Hello Amin,

I think you can do it by including one app's files inside the other app's files, so, the second one can reach the first one files and viceversa. Then may you can use an Iframe control in one app to load certain app's file URL of the other app. This probably can be the most easy way to do it, but I am not sure if can be enough or not...

---

Thanks for response David.

I'm actually doing that. Basically copying the directories and folders from AB build (that is tested and fully functional) into a new directory in my Cordova app directory. However, I keep getting errors that I suspect are related to either the App object or the $rootScope. I get an error for line 340 ( $rs.App.LastError = exception.message; ) of app.js that says Uncaught TypeError: Cannot set property 'LastError' of undefined. I commented this line just to see what happens next. and still i got error "Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.9/$rootScope/infdig?p0=10&p1=[]" related to builder.js around d("infdig",b,A);

Note: there's i think something do to with the way the App obj is created as the app name appears like this also: {{App.Name}}

I'm wondering if you are aware of any solutions to fix this.

Thanks a million for your outstanding support.

Hello Amin,

Certainly we need to test it, because, some unexpected problem can occur. However, I try to create an Cordova app from the scratch using the command line. Then, I put an "www" of an App Builder's app inside the first created one. In the index.html of the first app I place an iframe, and, point the "src" of the iframe to the "index.html" of the App Builder's app.

The above works, Amin. Of course this requires more tests, as I said, but, in principle, work here with simple sample apps.

On the other hand, if we can see working an AB app running in an non AB app, probably we can do also the contrary: an non AB app, running in an AB app.

You can download here an "hello" Cordova app which run in an Iframe the "Database" sample of AB:

https://www.decsoftutils.com/temp/hello.zip

https://www.decsoftutils.com/temp/hello.apk

Anyway, I start to think that certainly insert an app inside an iframe may can have some unexpected result. On the other hand, what happen if the inserted/embedded app have some specific Cordova requeriments? Maybe its enough than the first app (the host app) add the right stuff (like plugins) and can these be available for the inserted app?

The above questions must be answered... so, in principle, depending on the app, the above iframe solution can be good or not. Apparently the sample that I prepare works as expected.

---

You are incredible David!

It works as you instructed, and so far it is all good. The AB part is supposed to call an API and displays the results in a table, that it does perfectly and all appears in the iframe we defined in our old app. I will post it here if along the way we come across an issue and solved it in a way.

You saved us a huge amount of time and effort. THANK YOU

You're welcome Amin! :-)

---

Hi again David,

Thanks David for your help with iFrame and linking ab to traditional phonegap scripts. 

To call an API in the AB piece of the app we will need to pass a number of variables from our old app to app builder. Now I have the problem of setting variables in the ab that appears as iframe in my html. I pass the variables to ab index.html through URL, however I can't set any of the variables from ab to keep these parameters nor can I set any of the elements (e.g. a label) to display the passed variables. When I alert them, they are there, so the parameters from phonegap do pass on to the ab generated index.html, however, I don't know how to use them within this index.html. As an example I defined a variable in the AB like SetVar "test" "" "String" then tried to store the passed variable into App.RootScope.test but no luck so far. I also tried using "document.getelementbyid" which also failed, I think because the element wasn't generated when I called it in AB generated index.html.

I appreciate any advice or tip on this. Thank you

Hello Amin,

When you mention that you try with "App.RootScope.test"... are you trying with "window.App.RootScope.test"?

On the other hand, maybe passing params to the AB app's view can be enough? (Take a look at the ViewParams app sample)

Additionally... maybe you can use the app's local storage or cookies? Take a look at the GetOption and GetCookie actions.

---

Hi David,

Thanks a lot for your help and support. I used "App.test" in the index.htm of the app builder piece to refer to variable test and I think it did work. "localStorage.test" worked too and since we could control the local storage better, we decided to go with that.

Hi David, For the App that we are combining with the old Phonegap app we hit another issue. Now we will need to have a home button in the AB part to close the iframe and return back to the page that has opened it. Phone's back button does that already but we have got stuck on how to close an iframe from inside of it, appreciate any help on that.

Hello Amin,

I am not sure if can understand perfectyl well the concept of "close an iframe"... certainly we can go (using actions like ShowView or ReplaceView) to other app's views from other ones. But for something like "close an iframe", the only thing that I can think (right now) is to set the Iframe URL to an empty one.

However, something like this appear not working:

SetVar "[IFrame1.Url]" "" "String"

Instead of that, you can try with something like this:

SetVar "[IFrame1.Url]" "about:blank" "String"

Or maybe you can prepare an HTML file (from the app's files manager) in your app in order to be used for the above, that is, to "empty" the Iframe... which is the more close to "close an Iframe" that I can figure out right now, Amin.

---

Hi David,
In combining our AB app with our Cordova app we ran into yet another unexpected problem we could not solve so far. We need to load some ad in the AB piece that is not a big deal but Googles has prohibited opening ads in iFrames! I know why they have done it and I know we do not manipulate the ad but they ban accounts with no explanation so it is not a risk I am willing to take. So first thing we could think of was to turn a local storage flag into 1 in the AB part that is running in the iFrame and put on an event listener in its index.html like below to read it into a message for its Cordova parent app. window.addEventListener("storage", function (e) { window.parent.postMessage({ event_id: 'ad_flag', data: { ad_flag: localStorage.LS_BTNeedsAd } }, '*'); }); We added the below part to Cordova app to read the message from the AB iFrame and display the ad on AB demand. But no success so far window.addEventListener('message', function (e) { alert(e.data + " " + e.data.event_id + " "+ e.data.data + " "+ e.data.data.stars); if(e.data.event_id == 'ad_flag'){ alert("HI"); show_ad(); } }); Any advice is greatly appreciated.

Hello Amin,

Maybe I don't understand completely what you wanted, sorry for that, but, reading about the window storage event here, "The storage event is only triggered when a window other than itself makes the changes.". Maybe this can cause the problem? That is, maybe the storage event is not fired as you expected?

---

Hi David,
As always you saved the day, that was our problem. "The storage event is only triggered when a window other than itself makes the changes." Now the AB app that is running withing an iFrame can demand ad from parent Cordova app with no problem and no risk of violating Google instructions :). THANKS A MILLION

Hello Amin,

Good! Glad to know that you got it.

---