CustomWebView : An extended form of Web Viewer

1.Introduction

Extension Name: CustomWebView
It is an extended version of web viewer with more customization and flexibility.Its customization and additional features make it different from Web Viewer although it uses same Web View class.
Note: CustomWebView can work only on devices running on at least Android 5.0

Latest Version: 4
Released: 2020-05-12T18:30:00Z
Last Updated: 2020-05-25T18:30:00Z

2.Features

  • More customization options than normal web viewer
  • Long Click event
  • New window request event
  • Load local files and content using Html and Js
  • Find words and phrases in webview
  • Evaluate Js and get result
  • Block network loads to save data and load faster
  • Upload files to websites
  • Error occurred event
  • Get output from console
  • FormResubmission event
  • Get content height
  • Get SSL Certificate of website
  • Get cookies for particular url/website
  • Event for permission(s) request
  • Grant permission(s) manually
  • Print web content
  • A wide range of tools for working with JavaScript
  • Accepts external links
  • Download files using built-in download method

3.Designer Properties

image

4.Blocks

Events

image
image
image
image
image

Methods/Functions

image
image
component_method (5)
image
image
image

Properties

image
image
image
image

5.Documentation

Events

  • AfterJavaScriptEvaluated
    Event raised after evaluating Js with result
    image
    result ~ text
  • Cookies Removed
    Event raised after ‘ClearCokies’ method with result
    image
    successful ~ boolean
  • File Upload Needed
    Event raised when file uploading is needed
    image
  • Find Result Received
    Event raised after ‘Find’ method with int ‘activeMatchOrdinal’,‘numberOfMatches’ and ‘isDoneCounting’
    image
    activeMatchOrdinal ~ int
    numberOfMatches ~ int
    isDoneCounting ~ boolean
  • Got Ssl Certificate
    Event raised after getting SSL certificate of current displayed url/website with boolean ‘isSecure’ and Strings ‘issuedBy’,‘issuedTo’ and ‘validTill’.If ‘isSecure’ is false and other values are empty then assume that website is not secure
    image
    isSecure ~ boolean
    issuedBy ~ text
    issuedTo ~ text
    validTill ~ text
  • Got Print Result
    Event raised after getting previus print’s result
    image
    id ~ text
    isCompleted ~ boolean
    isFailed ~ boolean
    isBlocked ~ boolean
  • Long Clicked
    Event raised when something is long clicked in webview with item(image,string,empty,etc) and type(item type like 0,1,8,etc)
    image
    item ~ text
    type - int
  • On Console Message
    Event raised after getting console message
    image
    message ~ text
    lineNumber ~ int
    sourceID ~ int
    level ~ text
  • On Download Needed
    Event raised when downloading is needed
    image
    url ~ text
    contentDisposition ~ text
    mimeType ~ text
    size ~ int (long)
  • On Error Received
    Event raised when any error is received during loading url and returns message,error code and failing url
    image
    message ~ text
    errorCode ~ int
    url ~ text
  • On Form Resubmission
    Event raised when resubmission of form is needed
    image
  • On Js Alert
    Event raised when Js have to show an alert to user with message to be shown
    image
    url ~ text
    message ~ text
  • On Js Confirm
    Tells to display a confirm dialog to the user
    image
    url ~ text
    message ~ text
  • On Js Prompt
    Event raised when JavaScript needs input from user
    image
    url ~ text
    message ~ text
    defaultValue ~ text
  • On New Window Requested
    Event raised when new window is requested by webview with target url ,boolean ‘isDialog’ and ‘isPopup’
    image
    url ~ text
    isDialog ~ boolean
    isPopUp ~ boolean
  • On Permission Request
    Event raised when a website asks for specific permission(s)
    image
    permissionsList ~ list < String >
  • On Progress Changed
    Event raised when page loading progress has changed
    image
    progress ~ int
  • On Received Http Auth Request
    Notifies that the WebView received an HTTP authentication request
    image
    host ~ text
    realm ~ text
  • Page Started
    Event indicating that page loading has started in web view
    image
    url ~ text
  • Page Loaded
    Event raised when page loading has finished
    image
  • Web View String Change
    Event indicating change in webview string
    image
    value ~ text

Methods

  • Can Go Back
    Gets whether this WebView has a back history item
    image
    Returns : boolean
  • Can Go Back Or Forward
    Gets whether the page can go back or forward the given number of steps
    image
    steps ~ int
    Returns : boolean
  • Can Go Forward
    Gets whether this WebView has a forward history item
    image
    Returns : boolean
  • Cancel Printing
    Cancels current print job. You can request cancellation of a queued, started, blocked, or failed print job
    image
  • Clear Cache
    Clears the resource cache
    image
  • *Clear Internal History
    Tells this WebView to clear its internal back/forward list
    image
  • Clear Location
    Clears all location preferences
    image
  • Clear Matches
    Clears the highlighting surrounding text matches
    image
  • Confirm Js
    Whether to proceed JavaScript originated request
    image
    confirm ~ boolean
  • Content Height
    Returns content height of HTML content
    image
    Returns : int
  • Continue Js
    Inputs a confirmation response to Js
    image
    input ~ text
  • Create WebView
    Arrangement to create webview. Horizontal and Vertical Arrangements are recommended.
    image
    container ~ arrangement
  • Destroy WebView
    Destroys the webview and removes it completely from view system
    component_method (5)
  • Dismiss Js Alert
    Dismiss previously requested Js alert
    image
  • Download
    Downloads the file from url.Use this method with ‘OnDownloadNeeded’.
    Provide empty string in ‘fileName’ and ‘dwnloadDir’ to use default values.
    image
    url ~ text
    mimeType ~ text
    contentDisposition ~ text
    fileName ~ text
    downloadDir ~ text
  • Evaluate JavaScript
    Asynchronously evaluates JavaScript in the context of the currently displayed page
    image
    script ~ text
  • Find
    Finds all instances of find on the page and highlights them, asynchronously. Successive calls to this will cancel any pending searches
    image
    string ~ text
  • Find Next
    Highlights and scrolls to the next match if ‘forward’ is true else scrolls to previous match
    image
    forward ~ boolean
  • Get Cookies
    Get cookies for specific url
    image
    url ~ text
    Returns : text
  • Get Ssl Certificate
    Gets the SSL certificate for the main top-level page and raises ‘GotCertificate’ event
    image
  • Get Url To Open
    Returns the url which launched this activity
    image
    Returns : text
  • Go Back
    Goes back in the history of this WebView
    image
  • Go Back Or Forward
    Goes to the history item that is the number of steps away from the current item. Steps is negative if backward and positive if forward
    image
    steps ~ int
  • Go Forward
    Goes forward in the history of this WebView
    image
  • Go To Url
    Loads the given URL
    image
    url ~ text
  • Grant Permission
    Grants permissions to webview.It accepts a list of permissions
    image
    permissions ~ list < String >
  • Load HTML
    Loads the given data into this WebView using a ‘data’ scheme URL
    image
    html ~ text
  • Print Web Content
    Prints the content of webview
    image
  • Proceed Http Auth Request
    Instructs the WebView to proceed with the authentication with the given credentials.If both parameters are empty then it will cancel the request
    image
    username ~ text
    password ~ text
  • Reload
    Reloads the current URL
    component_method (25)
  • Restart Printing
    Restarts current/previous print job. You can request restart of a failed print job
    image
  • Resubmit Form
    Whether to resubmit form or not
    image
    reSubmit ~ boolean
  • Stop Loading
    Stops the current load
    image
  • Upload File
    Uploads the given file from content uri
    image
    contentUri ~ text

Properties

  • Auto Load Images
    Get/Set auto loading of images
    image
    Accepts boolean
    Default : true
  • Auto Play Media
    Get/Set auto play of media (audio/video).
    image
    Accepts bolean
    Default : false
  • Background Color
    Set background color of web view
    image
    Accepts int
    Default : 0 (Transparent) for empty webview , -1 (White) for non-empty webview and -16777216 (Black) for HTML content
  • Block Network Loads
    Get/Set block network loads
    image
    Accepts boolean
    Default : false
  • Current Page Title
    Get current page title
    image
  • Current Url
    Get current url
    image
  • Desktop Mode
    Get/Set desktop mode
    image
    Accepts boolean
    Default : false
  • Deep Links
    Gets/Sets whether to enable deep linking in webview
    image
    Default : false
  • Display Zoom
    Sets whether the WebView should display on-screen zoom controls
    image
    Accepts boolean
    Default : true
  • Enable Js
    Get/Set whether the WebView should supports Js execution
    image
    Accepts boolean
    Default : true
  • File Access
    Get/Set whether the WebView can access local files
    image
    Accepts boolean
    Default : false
  • Follow Links
    Get/Set whether to follow links when they are clicked in the WebView
    image
    Accepts boolean
    Default :true
  • Font Size
    Get/Set font size of text in WebView
    image
    Accepts int
    Default : 16
  • Ignore Ssl errors
    Get/Set whether to ignore SSL errors
    image
    Accepts boolean
    Default : false
  • Load with Overview Mode
    Get/Set whether the WebView loads pages in overview mode, that is, zooms out the content to fit on screen by width
    image
    Accepts boolean
    Default : true
  • Long Clickable
    Get/Set whether text selection and context menu are enabled
    image
    Accepts boolean
    Default : true
  • Prompt For Permission
    Get/Set whether webview will prompt for permission and raise ‘OnPermissionRequest’ event or not
    image
    Accepts boolean
    Default : true
  • Scrollbar
    Set whether webview will show horizonatal and vertical scrollbar
    image
    Accepts boolean
    Default : true
  • Support Multiple Windows
    Get/Set whether the WebView supports multiple windows and raised ‘OnNewWindowRequest’ event
    image
    Accepts boolean
    Default : true
  • Use Wide View Port
    Get/Set whether the WebView should enable support for the ‘viewport’ HTML meta tag or should use a wide viewport
    image
    Accepts boolean
    Default : true
  • Visible
    Gets/Sets visibility of webview
    image
    Default : true
  • Web View String
    Get/Set web view string
    image
    Accepts string
    Default : " "
  • Zoom Enabled
    Set whether web view supports zoom and built-in zoom controls are enabled or not
    image
    Accepts boolean
    Default : true
  • Zoom Percent
    Set zoom percent of web view
    image
    Accepts int
    Default : 100

6.Downloads

Aix file

Download Link1: com.sunny.CustomWebView.aix (53.9 KB)
Download Link2: https://drive.google.com/file/d/1GhtrP4DoTU-Irt46efXQiluhJZWMsYV6/view?usp=sharing

7.Open Source

This extension is open source so that anyone can modify and improve it :innocent:
Here is the repo on GitHub:

Thank you for reading this.
Hope this helps ! :grin:

12 Likes

Looks promising. It doesn't appear as a visual component though, when I drag it onto the screen? It gets placed as a non visual component. How is it supposed to display html content?

Hi @Andy_Bulka Welcome
You will have to manually create webview in an arrangement.
You can find more information here:

2 Likes

Sry silly question... ofc CustomWebView is itself a Dynamic Component
:sweat_smile:

I wanted to create it via DynamicComponentsExtension and asked myself why it didn't work like it supposed to do for me

1 Like

Yes after latest update of his extension.
But there is no need to use it with his extension if you are using a version greater than >= v6.

1 Like

I got this error when trying to create a WebView in Vertical Scroll Arrangement:

ScrollView can host only one direct child

Any reason?

No need to discuss, just something I ranodmly discovered, this is not a problem

1 Like
ChangeLog Version5

New blocks

Changes

  • Added secondaryUrl parameter in LongClicked event
ChangeLog Version6

New Blocks

Changes

  • Added 'id' parameter in CreateWebView method

  • Added 'mimeType' and 'isCaptureEnabled' values in FileUploadNeeded event

  • Removed most of the designer properties
  • Some internal changes
  • Fixed grammar and spelling mistakes
ChangeLog Version7

New Blocks




Bug Fixes

  • Fixed bug in PrintWebContent method
  • Fixed bug in FileUploadNeeded method

What's new

  • Ad Blocker
ChangeLog Version7.1 (Patch Update)

Changes

  • Re-added some properties to designer
  • Added missing permissions

Bug Fixes

  • Fixed bug in LongClickable property

Version 7.1: com.sunny.CustomWebView.aix (64.0 KB)


CustomWebView - lite

Presenting just another variant of CustomWebView.
Note: This version can run even on Api 11 i.e. Honeycomb

Blocks



Documentation
Most of blocks work same as original version except this new event:

  • OnSwipe
    Event raised when left or right swipe occurs in webview.It returns 1 for left swipe and 2 for right swipe.

    direction ~ int

Aix
com.sunny.CustomWebView.aix (14.0 KB)

2 Likes

Oh yeah! This is EXACTLY what I needed!!! Thank you very much! I wanted to make a Slideshow with Gifs, and this is now possible thanks to you!
:hugs:

1 Like

That's why it is lite version :wink:

1 Like

I, vknow360 aka Sunny Gupta, attest that I am the author of the CustomWebView extension , grant that the extension included in this project is free and that MIT has a non-exclusive irrevocable license to republish the extension as part of the project file for the purposes of the MIT App Inventor Hackathon 2020.

Thanks to @Yoshi :heart_eyes:

2 Likes

Thanks, now I have everything for my app :grin:

1 Like

Problem solved forgot about the container :sweat_smile:

Version 8:

2 Likes

Set UserAgent not working in a companion/compiled app, getting "403 disallowed_userAgent" when attemptng google sign up? (Tried five different user agents, all without ;wv)

Hi @TIMAI2
Can you share your blocks and respective User Agents?

Hi Sunny

Is your extension working with HTML files, stored in App Assets, AI2 version nb184? The native WebViewer component cannot load files from anywhere, though it was perfectly fine in nb183.

I have not tested it yet.
Let me check.
But android version plays an important role here.
(I can test it only on Kitkat,Lollipop and Nougat)

Please see your PMs

ChangLog Version 9

Documentation

  • AfterArchiveSaved
    Event raised after 'SaveArchive' method.If 'success' is true then returns file path else empty string.
    image
    success ~ boolean
    filePath ~ text
  • GetInternalHistory
    Get internal history of given webview.
    image
    id ~ int
    Returns: list<String>
  • InvokeZoomPicker
    Invokes the graphical zoom picker widget for this WebView. This will result in the zoom widget appearing on the screen to control the zoom level of this WebView.Note that it does not checks whether zoom is enabled or not.
    image
  • LoadWithHeaders
    Loads the given URL with the specified additional HTTP headers defined is list of lists.
    image
    url ~ text
    headers ~ List<List<String>>
  • SaveArchive
    Saves the current view as a web archive
    image
    dir ~ string
    Note: Use absolute path here

Hope it helps!
Thank you.

1 Like