[OS10] Can webapp screens be reused in a mobile app?

[OS10] Can webapp screens be reused in a mobile app?

  

At the moment I am working for a client that has a main focus on mobile apps. Besides that some (desktop web applications) are also developed.

Now, the inevitable question arose; can we reuse de webapp screens in the mobile app?

I have noticed that the UI components (from webapps) like webblocks are not accessible via dependencies when working in a mobile app.

The client wants to prevent building the same screens twice, so is there a way to reuse webapp screens in a mobile app?

I think you have to "redo" them, the mobile apps themes and widgets are different.

If the screens are already responsive you could wrap the app with something like PhoneGap, but to be able to build a native app using OutSystems, currently you are not able to reuse the screens from web applications.

Justin

Why would you re-use it, since the screen will have a different goal alltogether?

sure there are some screens you can use both on mobile and web, but then you would stick to responsive screens which are used in mobile browsers.


Like Jogait, p10-mobile is "simply" a different engine

The reason for re-use is that the client wants it :) They want all their screens working on all devices. I know that this is a bit of a stretch but I also understand that they are reluctant to build the same screens 2 or 3 times.

I did some tests with different themes within the espace: one for web and one for mobile. While this did work in P9 it is prevented to do in P10.

I think I found a solution. It is now possible for me to show a OS webpage in the mobile app. Need still some work but can be an approach...

Hi Hans,

Let us know once that is done.

Thanks and Regards,

Suraj Borade

My solution was to use an iframe element in a webblock which I feed a dynamic url. This works and in the emulator there seemed not a lot of problems.

However while testing it in OSNow it didn't work as expected. Main issue was that when I scrolled to the bottom for the next screen and clicked on the 'next' button, it translated that click as being above, on the first part of the screen. So clicking on 'next' was the same as clicking on the 10 record of the list. You can't go the next screen.

It is also quite slow; every new screen seems to be 5 seconds. Even events and actions: clicking on the search field for instance reacts only after 5 seconds. (I expect that all the necessary OS libs are fetched and cached then). These are all first timers but since the goal was to re-use simple screens I am not sure if this will be workable. 

There are more differences between the emu and OSNow: email works on OSNow and not on Emu, the app switcher works on Emu but not on OSNow (not needed or relevant now but good to know).

For now, I will let further investigations rest until a better idea arises :)




Hello Hans,


Your approach is correct, but please check out the page below for some more insights on how to proceed and to automatically log in the end-users in the Web apps.


https://success.outsystems.com/Documentation/Development_FAQs/How_to_Reuse_Web_Screens_in_Mobile_Apps


Let us know if this improves the overall experience for you.

Hi Paulo,

Thanks for the extra information about this, I will try it to see if it works better.

1 question: where is the client action called? on the webblock initialize?

Hello Hans,


You should call the client action FetchIframe as the event handler of the On Ready and On Parameters Changed of the Block. We improved the article to make this clear, so please check it out again:


https://success.outsystems.com/Documentation/Development_FAQs/How_to_Reuse_Web_Screens_in_Mobile_Apps


Let me know if you have more questions, this is an advanced task and perhaps you have more feedback that will help us improve the article. Thanks!

Thank you for the update: I have implemented the logic now and here are my remarks:

At first I tested the webblock with a fixed, external webadres (www.w3schools.com), but this wil not work due to the http request header settings in the javascript, it needs an address in the same domain. This error is only seen in the browser console. After this I used screens in my own environment.

Because of my test setup I didn't use a login and had all my pages set to anonymous. I expected the part about the onsecurity exception optional. However I couldn't get it working and there were no errors logged anywhere.

So, next I implemented a login, set all screens to registred and added the onsecurity exception logic. After logging in on the mobile app and going to the webapp screen it showed up! So that part works.

First thing that I noticed was that it performs better then my previous solution. The first startup still needs some time but after that it performs well.

For my webapp screens I use Liverpool as a responsive theme. However the page in the emulator is not shown as a responsive page. Going to the next screen (previously impossible) is now no longer a problem.

Testing the same page in OSNow on my iphone gives me a webpage in responsive format. Unfortunately the screen behaves badly. It refuses to scroll down. Swiping up or down don't work as expected which means it is unusable as it is now. 

To me it seems that in the end it is workable but really needs a lot of effort to get it working right, maybe the effort should go to designing 2 good screens for 2 different solutions, in stead of one that will fit all but not quite right.

Wim

After further investigation I came across the inAppBrowser plugin. This is a Cordova plugin that can be used on the OutSystems platform. You can find it in the Forge.

With this I can open webapps without the fore-mentioned (viewport) problems. It needs some extra investigation but it looks good for now. Only drawback so far is that it doesn't work in the emulator but since it's a plugin that's expected.