User Interface

User Interface (UI) refers to the visual and interactive elements of a digital system or application that enable users to interact with and control it.

About the component


Image Description
  •  Last Update 25 Oct, 2023
  •  Component Version : 10.0.0
  •  API 21, Android 5.0 Lollipop
  •  78 Blocks Available

WebViewer Component

This component displays web pages and allows interaction with them. It provides properties and methods for controlling the web page display, navigation, and JavaScript interaction.

Overview

This component displays web pages and allows interaction with them. It provides properties and methods for controlling the web page display, navigation, and JavaScript interaction.

Events

Image Description
Events

BeforePageLoad

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

    • # Name Type(s) Default Value
    1 url text -
    Image Description
    Events

    DownloadRequested

  • DownloadRequested.

    • # Name Type(s) Default Value
    1 url text -
    2 agent text -
    3 content text -
    4 type text -
    5 length Integer -
    Image Description
    Error Occurred

    ErrorOccurred

  • When an error occurs during page loading, this event is run.

    • # Name Type(s) Default Value
    1 errorCode Integer -
    2 description text -
    3 failingURL text -
    Image Description
    Events

    OnJavaScriptOutput

  • Returns the output of the executed JavaScript.

    • # Name Type(s) Default Value
    1 output text -
    Image Description
    Events

    OnPageFinished

  • Fires once the page has finished loading

    • # Name Type(s) Default Value
    1 url text -
    Image Description
    Events

    OnPopupBackPressed

  • Fires when the back button is pressed within a popup window.

    • Image Description
    Events

    OnPopupDismissed

  • Fires when a popup window is dismissed.

    • Image Description
    Events

    PageLoaded

  • When a page has finished loading, this event is run.

    • # Name Type(s) Default Value
    1 url text -
    Image Description
    Events

    ProgressChanged

  • This event is fired when the progress of the WebViewer has changed.

    • # Name Type(s) Default Value
    1 progress Integer -
    2 url text -
    Image Description
    Events

    WebViewStringChange

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

    • # Name Type(s) Default Value
    1 value text -

    Methods

    Image Description
    Methods

    CanGoBack

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

    • Image Description
    Methods

    CanGoBackAndForward

  • Checks if it is possible to navigate the history forward or backward by a specified number of steps.

    • # Name Type(s) Default Value
    1 step Integer -
    Image Description
    Methods

    CanGoForward

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

    • Image Description
    Image Description
    Image Description
    Methods

    ClearCaches, ClearCookies, ClearLocation

  • Clear WebView caches.


  • Clear WebView cookies.


  • Clear stored location permissions.

    • Image Description
    Methods

    DismissPopup

  • force destroy popup.

    • Image Description
    Image Description
    Image Description
    Methods

    GetDatabaseEnabled, GetDomStorageEnabled, GetJavaScriptEnabled

  • Gets whether the database storage API is enabled.


  • Gets whether the WebView has access to the device file system.


  • Gets whether Javascript is enabled in the current WebView.

    • Image Description
    Methods

    GetMediaPlaybackRequiresUserGesture

  • Gets whether media playback requires user gesture in the current WebView.

    • Image Description
    Methods

    GetSourceCode

  • Get source code. Set address page and charset.

    • # Name Type(s) Default Value
    1 charset text -
    Image Description
    Methods

    GetTextZoom

  • Gets the text zoom of the page in percent.

    • Image Description
    Methods

    GetUserAgentString

  • Gets the current useragent string being used by the WebView.

    • Image Description
    Methods

    GoBack

  • Go back to the previous page in the history list.

    • Image Description
    Methods

    GoBackAndForward

  • Navigates the history forward or backward by a specified number of steps.

    • # Name Type(s) Default Value
    1 step Integer -
    Image Description
    Methods

    GoForward

  • Go forward to the next page in the history list.

    • Image Description
    Methods

    GoHome

  • Loads the page from the home URL.

    • Image Description
    Methods

    GoToUrl

  • Load the page at the given URL.

    • # Name Type(s) Default Value
    1 url text -
    2 isExternalBrowser boolean -
    Image Description
    Methods

    LaunchExternalBrowser

  • LaunchExternalBrowser.

    • Image Description
    Methods

    Reload

  • Reload the current page.

    • Image Description
    Methods

    RunJavaScript

  • Executes the given JavaScript in the current web viewer.

    • # Name Type(s) Default Value
    1 js text -
    Image Description
    Methods

    SetAllowFileAccess

  • Enables or disables file access within WebView.

    • # Name Type(s) Default Value
    1 allow boolean -
    Image Description
    Methods

    SetBlockNetworkLoads

  • Sets whether WebView should block resources from network locations.

    • # Name Type(s) Default Value
    1 block text -
    Image Description
    Methods

    SetCacheMode

  • Sets the cachemode the WebView should use.

    • # Name Type(s) Default Value
    1 cacheMode Integer -
    Image Description
    Methods

    SetDatabaseEnabled

  • Enables or disables access to the database storage API in the current WebView.

    • # Name Type(s) Default Value
    1 enabled boolean -
    Image Description
    Methods

    SetGeolocationEnabled

  • Sets whether geolocation is enabled in the WebView.

    • # Name Type(s)
    1 enabled boolean -
    Image Description
    Methods

    SetInitialScale

  • Can be used to set the initial scale if the webpage doesnt make use of a viewport meta tag.

    • # Name Type(s) Default Value
    1 Scale Integer -
    Image Description
    Methods

    SetJavaScriptCanOpenWindowsAutomatically

  • Sets whether javascript can open windows automatically.

    • # Name Type(s) Default Value
    1 enabled boolean -
    Image Description
    Methods

    SetJavaScriptEnabled

  • Sets whether javascript is enabled in the WebView.

    • # Name Type(s) Default Value
    1 enabled boolean -
    Image Description
    Methods

    SetLoadWithOverviewMode

  • Sets whether the WebView loads pages in overview mode.

    • # Name Type(s) Default Value
    1 enabled boolean/td> -
    Image Description
    Methods

    SetMargin

  • The space outside a component, between the component’s boundary and other components. It determines the distance between different UI elements.

    • # Name Type(s) Default Value
    1 left Integer 0
    2 right Integer 0
    3 top Integer 0
    4 bottom Integer 0
    Image Description
    Methods

    SetPadding

  • The padding around the check box. Padding is the space inside the border.

    • # Name Type(s) Default Value
    1 left Integer 0
    2 right Integer 0
    3 top Integer 0
    4 bottom Integer 0
    Image Description
    Methods

    SetMediaPlaybackRequiresUserGesture

  • Sets whether media playback requires user gesture within WebView.

    • # Name Type(s) Default Value
    1 require * -
    Image Description
    Methods

    SetOverrideURLChange

  • Sets whether the URL should be checked prior to loading.

    • # Name Type(s) Default Value
    1 enabled boolean -
    2 url text -
    Image Description
    Methods

    SetSupportMultipleWindows

  • Sets whether WebView should support multiple windows.

    • # Name Type(s) Default Value
    1 enabled boolean -
    Image Description
    Methods

    SetTextZoom

  • Sets the text zoom of the page in percent.

    • # Name Type(s) Default Value
    1 textZoom Integer -
    Image Description
    Methods

    SetUseWideViewPort

  • Sets whether the current WebView should enable support for the "viewport" HTML meta tag.

    • # Name Type(s) Default Value
    1 enabled boolean -
    Image Description
    Methods

    SetUserAgentString

  • Sets the useragent string for the WebViewer to use.

    • # Name Type(s) Default Value
    1 userAgentString text -
    Image Description
    Methods

    StopLoading

  • Stop loading a page.

    • Properties

    Image Description
    Image Description
    Methods

    CurrentUrl, CurrentPageTitle

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


  • Title of the page currently viewed.

    • # Name Type(s) Default Value
    1 CurrentUrl text -
    2 CurrentPageTitle text -
    Image Description
    Image Description
    Methods

    DeepLinks

  • Returns whether deep links are enabled or not.


  • Sets whether to enable deep links or not.

    • # Name Type(s) Default Value
    1 get DeepLinks Integer 0
    2 set DeepLinks Integer 0
    Image Description
    Image Description
    Methods

    DesktopMode

  • Returns whether to load content in desktop mode.


  • Sets whether to load content in desktop mode.

    • # Name Type(s) Default Value
    1 get DesktopMode boolean -
    2 set DesktopMode boolean -
    Image Description
    Image Description
    Methods

    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.


  • Determines whether to follow links when they are tapped in the WebViewer.

    • # Name Type(s) Default Value
    1 get FollowLinks Integer 0
    2 set FollowLinks Integer 0
    Image Description
    Image Description
    Methods

    Height

  • Getter method for the height of the web viewer in pixel value.


  • set the Height of the web viewer in pixel value.

    • # Name Type(s) Default Value
    1 get Height Integer -1
    2 set Height Integer -
    Image Description
    Image Description
    Methods

    Width

  • Returns the width of the web viewer in pixel value.


  • set the Width of the web viewer in pixel value of the web viewer.

    • # Name Type(s) Default Value
    1 ge Width Integer -1
    2 set Width Integer -
    Image Description
    Image Description
    Methods

    Height and width percent

  • Setter method for the height of the web viewer in percent value.


  • Setter method for the Width of the web viewer in percent value.

    • # Name Type(s) Default Value
    1 set HeightPercent Integer -
    2 set HeightPercent Integer -
    Image Description
    Image Description
    Methods

    HomeUrl

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


    • # Name Type(s) Default Value
    1 get HomeUrl text -
    2 set HomeUrl text -
    Image Description
    Image Description
    Methods

    IgnoreSslErrors

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


  • Determine whether or not to ignore SSL errors.

    • # Name Type(s) Default Value
    1 get IgnoreSslErrors boolean -
    2 set IgnoreSSLError boolean -
    Image Description
    Image Description
    Methods

    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.


  • Determine if the user should be prompted for permission to use the geolocation API.

    • # Name Type(s) Default Value
    1 get PromptForPermission boolean -
    2 set PromptForPermission boolean -
    Image Description
    Image Description
    Methods

    UseExternalBrowser

  • Reports current value of UseExternalBrowser.


  • If set to True, then uses external browser, else uses internal browser.

    • # Name Type(s) Default Value
    1 get UseExternalBrowser boolean -
    2 set UseExternalBrowser boolean -
    Image Description
    Image Description
    Methods

    WebViewString

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


  • Sets the web view string.

    • # Name Type(s) Default Value
    1 get WebViewString Integer 0
    2 set WebViewString Integer 0
    Image Description
    Image Description
    Methods

    ZoomEnabled

  • Enables or disables the ability to have zoom on page.


  • Enables or disables the ability to have zoom on page.

    • # Name Type(s) Default Value
    1 get ZoomEnabled boolean -
    2 set ZoomEnabled boolean -
    Image Description
    Image Description
    Methods

    Visible

  • Returns true if it is visible else returns false.


  • set the web viewer's Visibility to true or false.

    • # Name Type(s) Default Value
    1 get Visible boolean -
    2 set Visible boolean -