Web View Component in QB Mobile Apps

Introduction

Within any screen and mixed with any other component type you can add a Webview component that points to a URL.

This is typically used for HTML ticker type displays within an app. (For fulll screen web view see this article: Full Screen Web View

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

• Poorly laid out, not being optimised for mobile views within a small component area
• Webpage cookie acceptance screens can make the presentation of the component look poor until the cookie approval is dismissed
• 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.

Add plugin

Make sure you app is built with this plugin installed

Add webview component to screen

In any screen type add your webview component as per any other component type

Configure webview component

• Enter your URL
  • This component is typically used for HTML ticker type applications or banners. If the link is a full screen webview be aware
    • Most standard web pages will render a cookie agreement which may look ugly in a small window
    • If the URL contains an embedded player this may not function correctly in the app e.g. do not use this component to embed direct links to web video content such as Youtube videos.
• Enable scroll bar in the component if required
• Styles
  • Webview component will render full screen width in an app 
    • The size of the component can be either a fixed height in pixels
    • Or as an aspect ratio multiplier of full screen width so setting this to "1" will give a square component

Two examples of a webview component in a screen. The first is of fixed height 150px and the second is set to aspect ratio=1.