227
Views
6
Comments
Solved
How to Display Website/page Inside Mobile App
Application Type
Mobile
Service Studio Version
11.54.2 (Build 62176)
Platform Version
11.20.0 (Build 38549)

Good afternoon All,

I am in some urgent need of Guidance, so please offer any solutions you feel may be remotely of use please :) 

My customer has done a complete 720 at the final hurdle and literally 100's of hours are about to go out of the window. Even so, if I can find a solution and they are happy, then I'm happy.

What they are requesting sounds fairly straightforward, and is the easiest solution, although I'm not sure if it can be done.

The requirement is very simple, upon launching the app, the app checks the users device and loads either screen 1 (iOS) or screen two (Android). The user will not see the screens, to them the app will load seamlessly either way.

The purpose of the 'screens' is to house the customers website, literally and entirely within the app. They understand that this is purely just their website resized and displayed on a mobile device, but that's exactly what they want and need to get it running asap.

My issue is that, there seems to be no way to load the webpage seamlessly. The only ways I can see to do this show 'Done' in the top corner, or show the address bar somewhere on the screen, or, it launches the site on the users main browsers instead entirely.

Is there anyway I can make it so they click the app, the background function runs to check the users device, and then load the webpage within the app, without any of the functionality to 'close' the webpage view, or see the address on the screen? We want it so when the customer is done they simply close the entire app as you normally would, we don't want them so see it as some embedded page or similar.

As mentioned, this is super critical so any guidance is greatly appreciated :)

Warm regards,

Josh

2024-09-12 02-43-38
Deepsagar Dubey
Solution

Hi @Joshua McQuillan 

You can achieve it by put some hands on JavaScript and HTML elements, Since Outsystems not preferred to use custom JavaScript and HTML but as per requirement we can use,

I also worked on a problem like this so i used iFrame to solve this, even we can interchange information from iFrame to parent as well but it's require Little bit JavaScript knowledge you can also hide controls which you wants.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe - Refer this link to more info about its uses,

This is one example for data tranfer-

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";

var eventer = window[eventMethod];

var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";


// Listen to message from child window

eventer(messageEvent,function(e) {

    var key = e.message ? "message" : "data";

    var data = e[key];

    //run function//

},false);


Got it to work with the above in the parent page and the following in the child page -    


parent.postMessage("loadMyOrders","*");  //  `*` on any domain  

I hope it'll help you,

Thanks

Deep

2019-02-27 17-48-20
Caldeira81

Hi Joshua,

You need to use webview to expose your site. What i mean is that OS already uses webviews.

simple example: 



Or   Please check this :

https://www.outsystems.com/forums/discussion/37671/webview 


https://www.outsystems.com/forge/component-overview/1558/inappbrowser-plugin

Regards,


Hope that i ca help you out and consider this a good solution!

UserImage.jpg
Joshua McQuillan

Hi @Caldeira81 thank you for getting back to me so quickly.


I tried setting this up in a similar fashion on mobile, as that is what we will be relasing on, rather than a webapp so I'm not 100% sure this solution will work for what I need.


I do have the inappbrowser-plugin but I couldn't get it to work as intended. I will try again and see if I get any better results.


Thanks! 


Warm regards,


Josh

2019-02-27 17-48-20
Caldeira81

Hi, if you don´t want to use a mobile plugin "inappbrowser-plugin " or it does not work for you, did you try my first example? 

It is only to set External Site : Main Flow -> Add External Site (put the url link of customers website )

UserImage.jpg
Joshua McQuillan

Hi @Caldeira81, it works, but it shows me navigation buttons such as 'Done' and other navigation buttons that you would otherwise see on the devices browser.

I can get the URL to load the website, but I want to hide these extra navigation buttons and other ways in which they can close the screen. When the app loads I want the webpage to display with no way of closing it - do you know if this is possible?

2019-02-27 17-48-20
Caldeira81


Hi @Joshua McQuillan can you give a printscreen of the navigation buttons? i can see what is the problem.

using iframe can watch this:


2024-09-12 02-43-38
Deepsagar Dubey
Solution

Hi @Joshua McQuillan 

You can achieve it by put some hands on JavaScript and HTML elements, Since Outsystems not preferred to use custom JavaScript and HTML but as per requirement we can use,

I also worked on a problem like this so i used iFrame to solve this, even we can interchange information from iFrame to parent as well but it's require Little bit JavaScript knowledge you can also hide controls which you wants.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe - Refer this link to more info about its uses,

This is one example for data tranfer-

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";

var eventer = window[eventMethod];

var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";


// Listen to message from child window

eventer(messageEvent,function(e) {

    var key = e.message ? "message" : "data";

    var data = e[key];

    //run function//

},false);


Got it to work with the above in the parent page and the following in the child page -    


parent.postMessage("loadMyOrders","*");  //  `*` on any domain  

I hope it'll help you,

Thanks

Deep

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.