WebViewer

Last Updated On 2021-07-16

Version 10MinSDK 7Tutorial Video

Component for viewing Web pages. The Home URL can be specified in the Designer or in the Blocks Editor. The view can be set to follow links when they are tapped, and users can fill in Web forms. Warning: This is not a full browser. For example, pressing the phone's hardware Back key will exit the app, rather than move back in the browser history.

You can use the WebViewer.WebViewString property to communicate between your app and Javascript code running in the Webviewer page. In the app, you get and set WebViewString. In the WebViewer, you include Javascript that references the window.Niotron object, using the methoods and setWebViewString(text).

For example, if the WebViewer opens to a page that contains the Javascript command
document.write("The answer is" + window.Niotron.getWebViewString());
and if you set WebView.WebVewString to "hello", then the web page will show
The answer is hello.
And if the Web page contains Javascript that executes the command
window.Niotron.setWebViewString("hello from Javascript"),
then the value of the WebViewString property will be
hello from Javascript.


Properties

You can set the below properties in the UI part of the builder.

  • FollowLinks - it's a boolean value which is set to true by default.
  • HeihMargin - it's a four value which is set to 0,0,0,0 by default.
  • HeihPadding - it's a four value which is set to 0,0,0,0 by default.
  • HomeUrl - it's a string value which is set to blank by default.
  • IgnoreSslErrors - it's a boolean value which is set to false by default.
  • MarginBottom - it's a non negative float value which is set to 0 by default.
  • MarginLeft - it's a non negative float value which is set to 0 by default.
  • MarginRight - it's a non negative float value which is set to 0 by default.
  • MarginTop - it's a non negative float value which is set to 0 by default.
  • PaddingBottom - it's a non negative float value which is set to 0 by default.
  • PaddingLeft - it's a non negative float value which is set to 0 by default.
  • PaddingRight - it's a non negative float value which is set to 0 by default.
  • PaddingTop - it's a non negative float value which is set to 0 by default.
  • PromptforPermission - it's a boolean value which is set to true by default.
  • UserAgent - it's a text value which is set to blank by default.
  • UsesLocation - it's a boolean value which is set to false by default.
  • Visible - it's a visibility value which is set to true by default.
  • ZoomEnabled - it's a boolean value which is set to true by default.

Block Properties

You can set the below blocks properties in the blocks section of the builder.

CurrentPageTitle

Title of the page currently viewed


CurrentUrl

URL of the page currently viewed. This could be different from the Home URL if new pages were visited by following links.


FollowLinks

Determines whether to follow links when they are tapped in the WebViewer. If you follow links, you can use GoBack and GoForward to navigate the browser history.


Height

Specifies the `WebViewer`'s vertical height, measured in pixels.


HeightPercent

Specifies the vertical height of the WebViewer as a percentage of the height of the Screen.


HomeUrl

URL of the page the WebViewer should initially open to. Setting this will load the page.


IgnoreSslErrors

Determine whether or not to ignore SSL errors. Set to true to ignore errors. Use this to accept self signed certificates from websites.


MarginBottom

Property for MarginBottom


MarginLeft

Property for MarginLeft


MarginRight

Property for MarginRight


MarginTop

Property for MarginTop


PaddingBottom

Property for PaddingBottom


PaddingLeft

Property for PaddingLeft


PaddingRight

Property for PaddingRight


PaddingTop

Property for PaddingTop


PromptforPermission

If True, then prompt the user of the WebView to give permission to access the geolocation API. If False, then assume permission is granted.


UserAgent

Property for UserAgent


Visible

Specifies whether the WebViewer should be visible on the screen. Value is true if the WebViewer is showing and false if hidden.


WebViewString

Gets the WebView's String, which is viewable through Javascript in the WebView as the window.Niotron object


Width

Specifies the horizontal width of the `WebViewer`, measured in pixels.


WidthPercent

Specifies the horizontal width of the WebViewer as a percentage of the width of the Screen.


ZoomEnabled

Sets visibility of zoom button of the webview



Methods

You can set the below method blocks in the blocks section of the builder.

AlertCancel

Executes Alert "Cancel" button

AlertOK

Executes Alert "OK" button

CanGoBack

Returns true if the WebViewer can go back in the history list.

CanGoBackAndForward

Load page with HTML text

CanGoForward

Returns true if the WebViewer can go forward in the history list.

ClearCaches

Clear WebView caches.

ClearCookies

Clear WebView cookies.

ClearLocations

Clear stored location permissions.

GoBack

Go back to the previous page in the history list. Does nothing if there is no previous page.

GoBackAndForward

Load page with HTML text

GoForward

Go forward to the next page in the history list. Does nothing if there is no next page.

GoHome

Loads the home URL page. This happens automatically when the home URL is changed.

GoToUrl

Load the page at the given URL.

Reload

Reload the current page.

RunJavaScript

Run JavaScript in the current page.

StopLoading

Stop loading a page.

loadHTML

Load page with HTML text


Events

You can set the below event blocks in the blocks section of the builder.

BeforePageLoad

When a page is about to load this event is run.

DownloadRequested

Event for DownloadRequested

ErrorOccurred

When an error occurs this event is run.

JSAlert

Event for JSAlert

MessageConsoled

Event for MessageConsoled

PageLoaded

When a page is finished loading this event is run.

ProgressChanged

Event for ProgressChanged

WebViewStringChange

When the JavaScript calls AppInventor.setWebViewString this event is run.