Overriding / hiding the header or top navigation of an external website

Overriding / hiding the header or top navigation of an external website

  

Hi everyone,


Im making this mobile application using silkUI in outsystems 10's latest release. In my app Im opening an external link of a site as shown in the PrintScreen. It is showing the header or the top navigation of the site as well which naturally looks odd with two navigations and header. SoI dont want it to show the navigation of the website as I am displaying only one page so it does not need that navigation. How can I do this?

              Cheers,

                          Hafsa

ps: I am not a good programmer and still am learning outsystems so an easy way will be more helpful

No, No, No.

You simply CAN'T do that.
If a browser or any application allowed that, it would be a HUGE security flaw.

Forget it. If you want to open another site inside yours, you will have to bring everything. :)

You can, for example, open in "full screen", but you can't change the other site.

Cheers,
Eduardo Jauch

Eduardo Jauch wrote:

No, No, No.

You simply CAN'T do that.
If a browser or any application allowed that, it would be a HUGE security flaw.

Forget it. If you want to open another site inside yours, you will have to bring everything. :)

You can, for example, open in "full screen", but you can't change the other site.

Cheers,
Eduardo Jauch

Hi Eduardo,


Thank you for the quick reply.Im making this app for the same company whose links I want to open in my application for information purpose. But as you see it does not look good with two hamburger navigations. :(


Hello hafza. 

Unfortunately, there is no workaround here.
External sites are isolated. If they are in the same domain (both apps are yours) you can try to use JavaScript and there is some options, but when the applications are in different domains, you can't do anything about it. What you ask is what you will get.

A possible alternative would be to "cover" the other application partially, to hide this part, but I think most of the time you will create a big area with no purpose...

But you have to question yourself: Why do you need to open another application inside yours, and at the same time keep your header and footer?

Cheers,
Eduardo Jauch

Eduardo Jauch wrote:

Hello hafza. 

Unfortunately, there is no workaround here.
External sites are isolated. If they are in the same domain (both apps are yours) you can try to use JavaScript and there is some options, but when the applications are in different domains, you can't do anything about it. What you ask is what you will get.

A possible alternative would be to "cover" the other application partially, to hide this part, but I think most of the time you will create a big area with no purpose...

But you have to question yourself: Why do you need to open another application inside yours, and at the same time keep your header and footer?

Cheers,
Eduardo Jauch


Hi Eduardo, 


Let me make it more clear. I'm making an application for the same company who has the website( with the pages I want to display)  and they want a few of the information from their website to be available on their mobile application as well. So that answers why I want to open an app inside an app as it's not an app inside an app. Its a page from the website that needed to be displayed in a mobile app:)

Cheers,

Hafsa

hafsa zaineb wrote:

Let me make it more clear. I'm making an application for the same company who has the website( with the pages I want to display)  and they want a few of the information from their website to be available on their mobile application as well. So that answers why I want to open an app inside an app as it's not an app inside an app. Its a page from the website that needed to be displayed in a mobile app:)

Cheers,

Hafsa

Hi Hafsa,

1. I would say that if the APP is in OutSystems, would be much easier to just go in the database and grab the information to display in the application.

2. If the application is not in an OutSystems database, but the database is reachbale through an extension, go there get the information.

3. If none of the options above is available, but the other application provides a Web Service API (REST or SOAP) to provide the information, go there get it through web service.

In the worst case scenario, your company should make the 1 to 3 (on of them) available so you can do the page yourself.

Or...

You ask them to create a page that shows exactly the same info you want to show, without the header and footer, and you call it.

Otherwise, you will get stuck with this question, as there is no way to workaround...

Hi Eduardo, 

We have find another way if it's possible. We have decided not to show my mobile app menu and header on the pages which are linked to their website. In this way it will only pick one header / navigation / hamburger menu and that will be of website. 

Now my question here is, 

Im using silkUI mobile theme, is it possible for the theme to hide header/menu/top navigation from a few pages and show on the rest of the pages? By hiding I mean it shows a blank area where the web site's navigation can be displayed instead of mobile app top navigation.  I also will be needing a back button which a client after browsing the website can go back in mobile application. 

Is it possible, 

Hafsa


Eduardo Jauch wrote:

hafsa zaineb wrote:

Let me make it more clear. I'm making an application for the same company who has the website( with the pages I want to display)  and they want a few of the information from their website to be available on their mobile application as well. So that answers why I want to open an app inside an app as it's not an app inside an app. Its a page from the website that needed to be displayed in a mobile app:)

Cheers,

Hafsa

Hi Hafsa,

1. I would say that if the APP is in OutSystems, would be much easier to just go in the database and grab the information to display in the application.

2. If the application is not in an OutSystems database, but the database is reachbale through an extension, go there get the information.

3. If none of the options above is available, but the other application provides a Web Service API (REST or SOAP) to provide the information, go there get it through web service.

In the worst case scenario, your company should make the 1 to 3 (on of them) available so you can do the page yourself.

Or...

You ask them to create a page that shows exactly the same info you want to show, without the header and footer, and you call it.

Otherwise, you will get stuck with this question, as there is no way to workaround...



hafsa zaineb wrote:

Im using silkUI mobile theme, is it possible for the theme to hide header/menu/top navigation from a few pages and show on the rest of the pages? By hiding I mean it shows a blank area where the web site's navigation can be displayed instead of mobile app top navigation.  I also will be needing a back button which a client after browsing the website can go back in mobile application. 

Is it possible, 

Hafsa

Hi Hafsa,

It is possible, you just need to change the layout block your mobile screen is using... that being said, it seems like you're creating quite a messy application when it comes to user experience... the user will have menu and navigation there... but for the website? how intuitive is that? sometimes the menu reflects your app, sometimes the website? that's calling for trouble.

If you can, any of Eduardo's suggestions would provide your users with a better experience. That being said, if you are using an iframe, and its content is in the same domain as your app, then it is possible to use JavaScript to remove elements of the frame's document:

  1. obtain the iframe DOM object (probably will need to use something like document.getElementsByClassName(...) for this);
  2. then look for the element you want to remove on the contentDocument property of the iframe DOM object obtained in 1. (consider using the getElementById(...) method if you know the id of the header of your company's webpage);
  3. and then use the removeChild() method on the parentElement property of the header's DOM object obtained in 2.


Thank you Jorge and Eduardo for the replies. My problem is solved. What I did is make my navigation background colour same as its in website and I removed my hamburger menu for that specific page inside my application. Instead of that hamburger / menu navigation I put a back button in its place. In this way after visiting the website the person can go back to the previous page he was on. It gives the same look and feel as if its loading inside of the application.

Cheers,

Hafsa