Full Screen Webviews in QB mobile apps

Introduction

From within a Quick Brick mobile app a webview can be launched as a screen type.

Scenarios to use this might be

• Add web based content to your app such as additional video content, articles, editorial etc .

• Construct a settings page to display various links to external URLs such as

  • An accounts page

  • A FAQ page

  • Launch an e-mail client for a help desk

  • T&C page

  • Launch a dialler from a telephone number or and e-mail client from a lin

However, be aware that just using any existing webpage may cause issues due to that page

• Being poorly laid out, not being optimised for mobile views
• Containing embedded HTML5 players. These cannot be used a a substitute for a mobile player plugin and their behaviour within the app is not predictable.

The Applicaster Webview Screen (QB) plugin allows webscreens to be launched and navigated within the app, wtih a dedicated web nav bar to provide navigation through viewing history.

Webview is only utilized on links prefixed with http(s). Any other link types like; tel, mailto, app are opened by React Native openURL method, which opens them using the native OS.

If the Webview Screen (QB) plugin is not installed it opens all links using the React Native's openURL.

To use any schemes not prefixed by http(s) you will need to specify which ones are supported in the URL Schemes entry in the GENERAL app settings page in Zapp.

App requirements

Add the plugin Webview Screen (QB) to your app before building the app in Zapp.

Add a webview screen type

Add a screen to your app of type = Webview Screen (QB) and name it in UI Builder as you wish e.g. “New Webscreen”

Add this screen to your side menu or bottom tabs just like any other screen so it appears in the app navigation menu.

Configure the Webview screen.

The following styling parameters are available

Data Source and General

Normal data source types such as manual, JSON etc. can be used to provide the URL but in most cases simply enter a URL directly in the General: URL field.

You can select to

• Show the webscreen full screen (will sit over the existing Top App Nav Bar).
  • If you are using a Side Menu structure for your app then this will no longer be accessible when the webscreen is open
  • If you are using Bottom Tabs as an app menu structure then Bottom Tabs will also be hidden when this full screen option is enabled
• Show or hide the normal Top App Nav Bar
  • If this option is enabled and you are using a Side Menu structure for your app then this will no longer be accessible when the webscreen is open
  • If you are using Bottom Tabs as an app menu structure then Bottom Tabs will still be displayed
• Show or hide the dedicated Web Nav Bar (with back, forwards, close, URL title etc.)
  • When this option is enabled you can also choose to display a floating close button to enable you to exit the webscreen view and return to the app.

The Reload and Share button are also optional to display

Select the desired orientation for the webscreen view from

• Portrait
• Landscape left, right, or using sensor
• All but upside down
• Portrait upside down
• All orientations
• Play Media within the web page fullscreen when selected
• Prevent inline videos from going fullscreen
• Auto play media within the webpage

Styles and label

Configure the color of the webscreen background

Navbars

Style the webscreen Nav Bar

Loading bar and assets

This displays under the web Nav Bar whilst a web page is loading.

Style the loading text and loading bar color and the color of the buttons in the navbar.

Page title and Drop down menu

Style the text in the webpage title (URL) and the optional drop down menu for reload and share.

Regarding orientation, the setting here will determine how the screen view launches. Be careful with landscape view on iOS as unlike Android there is no native back control to get back to your app from the webview screen. Use landscape on iOS only if you are launching the web view from as a linked screen from another screen. Then the nav-bar back button will display.

Create a Settings page

1. Add a screen to your app of type = general and name it as you wish e.g. Settings

2. Add this (Settings) screen and link to it in your side menu just like any other screen so it appears in the side menu

3. Add components to your Settings screen such as a List

4. Connect the component in the usual way as per any other type of content to

• A feed containing the URLs for your links

• A Power Cell for the styling of the component

In the following example we have a feed containing various URLs that will create the following screen (List component has been used with Power Cell 2, no image)

// 20200414160033// 
https://zapp-pipes.herokuapp.com/general-provider/fetchData?type=FEED_JSON&url
=aHR0cHM6Ly93aW5vLWZlZWQuczMuYW1hem9uYXdzLmNvbS9saW5rRmVlZC9zZXR0aW5nc0ZlZWQuanNvbg
%3D%3D
{
"type": {
"value": "feed"
},"entry": [
{
"author": {
"name": "Admin"
},
"type": {
"value": "link"
},
"id": "sf-1000",
"title": "Audio List (UrlScheme)",
"summary": "Find out a little more about the company that created this framework for you",
"published": "2005-04-06T20:25:05-08:00",
"updated": "2005-04-06T20:25:05-08:00",
"link": {
"type": "link",
"href": "miami://present?screen_id=f6dc22a6-f0f0-4919-a07c-84245d288eaf"
},"extensions": {
  }
},
{
]
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-1100",
  "title": "About Us (External LInk)",
  "summary": "Find out a little more about the company that created this framework for you",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "<https://www.applicaster.com/about-us">
  },
  "extensions": {
  }
},
{
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-1200",
  "title": "Call Us",
  "summary": "Call us at 1-800-FEDEX",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "tel:[phone]"
  },
  "extensions": { 
  }
},
{
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-2000",
  "title": "Email Us",
  "summary": "If you aren't in a hurry you could email us using your default email client",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "mailto:[e-mail]"
  },
  "extensions": {
    
  }
},
{
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-3000",
  "title": "Developer Documentation (External)",
  "summary": "If you would like more information about how our API works, click here",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "<https://developer.applicaster.com/">
  },
  "extensions": {
    
  }
},
{
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-4000",
  "title": "Google Maps Link (Link)",
  "summary": "If you would like to pay us visit click here",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "<https://www.google.com/maps/search/?api=1&query=applicaster+miami">
  },
  "extensions": {
    
  }
},
{
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-5000",
  "title": "Maps (Geo UrlScheme)",
  "summary": "If you would like to pay us a visit using your maps app",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "geo:25.7630993,-80.1910887?q=granier"
  },
  "extensions": {
    
  }
},
{
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-6000",
  "title": "Google Maps (iOS UrlScheme)",
  "summary": "If you would like to pay us a visit using your maps app",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "comgooglemaps://?center=25.7630993,-80.1910887&zoom=14&views=traffic"
  },
  "extensions": {
    
  }
},
{
  "author": {
    "name": "Admin"
  },
  "type": {
    "value": "link"
  },
  "id": "sf-6000",
  "title": "Apple Maps (Link)",
  "summary": "If you would like to pay us a visit using your maps app",
  "published": "2005-04-06T20:25:05-08:00",
  "updated": "2005-04-06T20:25:05-08:00",
  "link": {
    "type": "link",
    "href": "<http://maps.apple.com/?q=Mexican+Restaurant&sll=50.894967,4.341626&z=10&t=s">
  },
  "extensions": {
    
  }
}
],
"author": {
"name": "Applicaster"
},
"id": "3100",
"title": "Settings"
}