CustomWebView : An extended form of Web Viewer

Get latest version here

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 : 11
Required Api : 21
Released: 2020-05-12T18:30:00Z
Last Updated: 2021-07-12T18:30:00Z

2.Features

  • More customization options than normal web viewer
  • Long Click event
  • New window request event
  • Close window request event
  • Load local files and content using Html and Js
  • Find words and phrases in webview
  • Evaluate Js and get result
  • Upload files to websites
  • Error occurred event
  • Get output from console
  • Form Resubmission event
  • Get content height
  • Get SSL Certificate of website
  • Get/Set cookies for particular url
  • Event for permission(s) request and grant permission(s) manually
  • Print web content
  • A wide range of tools for working with JavaScript
  • Accepts external links/Adds your app in browsers list when you use CustomWebViewHelper extension
  • Download files using built-in download method
  • Scroll Changed event and function to scroll to particular position
  • Create and Remove webviews dynamically
  • Ad blocker
  • Full screen video feature (OnShowCustomView and OnHideCustomView)
  • Pause and Resume webview
  • Get internal history
  • Create webpage shortcuts
  • Download offline pages and load them without internet connection

3.Designer Properties

image

4.Blocks

image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image

5.Documentation

AfterArchiveSaved

Event raised after 'SaveArchive' method.If 'success' is true then returns file path else empty string.
Params

success | boolean
filePath | text


AfterJavaScriptEvaluated

Event raised after evaluating Js and returns result.
Params

result | text


CookiesRemoved

Event raised after 'ClearCokies' method with result
Params

successful | boolean


FileUploadNeeded

Event raised when file uploading is needed
Params

id | number
mimeType | text
isCaptureEnabled | boolean


FindResultReceived

Event raised after 'Find' method with int 'activeMatchOrdinal','numberOfMatches' and 'isDoneCounting'
Params

id | number
activeMatchOrdinal | number
numberOfMatches | number
isDoneCounting | boolean


GotCertificate

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
Params

isSecure | boolean
issuedBy | text
issuedTo | text
validTill | text


GotPrintResult

Event raised after getting previus print's result.
Params

printId | text
isCompleted | boolean
isFailed | boolean
isBlocked | boolean


LongClicked

Event raised when something is long clicked in webview with item(image,string,empty,etc) and type(item type like 0,1,8,etc)
Params

id | number
item | text
secondaryUrl | text
type | number


OnCloseWindowRequest

Event triggered when a window needs to be closed
Params

id | number


OnConsoleMessage

Event raised after getting console message.
Params

message | text
lineNumber | number
sourceID | number
level | text


OnDownloadNeeded

Event raised when downloading is needed.
Params

id | number
url | text
contentDisposition | text
mimeType | text
size | number


OnErrorReceived

Event raised when any error is received during loading url and returns message,error code and failing url
Params

id | number
message | text
errorCode | number
url | text


OnFormResubmission

Event raised when resubmission of form is needed
Params

id | number


OnGeolocationRequested

Event for OnGeolocationRequested
Params

origin | text


OnHideCustomView

Event raised when current page exits from full screen mode

OnJsAlert

Event raised when Js have to show an alert to user
Params

id | number
url | text
message | text


OnJsConfirm

Tells to display a confirm dialog to the user.
Params

id | number
url | text
message | text


OnJsPrompt

Event raised when JavaScript needs input from user
Params

id | number
url | text
message | text
defaultValue | text


OnNewWindowRequest

Event raised when new window is requested by webview with boolean 'isDialog' and 'isPopup'
Params

id | number
isDialog | boolean
isPopup | boolean


OnPermissionRequest

Event raised when a website asks for specific permission(s) in list format.
Params

permissionsList | list


OnProgressChanged

Event raised when page loading progress has changed.
Params

id | number
progress | number


OnReceivedHttpAuthRequest

Notifies that the WebView received an HTTP authentication request.
Params

id | number
host | text
realm | text


OnReceivedSslError

Event for OnReceivedSslError
Params

errorCode | number


OnScrollChanged

Event raised when webview gets scrolled
Params

id | number
scrollX | number
scrollY | number
oldScrollX | number
oldScrollY | number
canGoLeft | boolean
canGoRight | boolean


OnShowCustomView

Event raised when current page enters in full screen mode

PageLoaded

Event raised when page loading has finished.
Params

id | number


PageStarted

Event indicating that page loading has started in web view.
Params

id | number
url | text


WebViewStringChanged

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

value | text


AllowGeolocationAccess

Method for AllowGeolocationAccess
Params

allow | boolean

remember | boolean


CanGoBack

Gets whether this WebView has a back history item

Return type : boolean


CanGoBackOrForward

Gets whether the page can go back or forward the given number of steps.
Params

steps | number

Return type : boolean


CanGoForward

Gets whether this WebView has a forward history item.

Return type : boolean


CancelPrinting

Cancels current print job. You can request cancellation of a queued, started, blocked, or failed print job.

ClearCache

Clears the resource cache.

ClearCookies

Removes all cookies and raises 'CookiesRemoved' event

ClearInternalHistory

Tells this WebView to clear its internal back/forward list.

ClearLocation

Clear all location preferences.

ClearMatches

Clears the highlighting surrounding text matches.

ConfirmJs

Whether to proceed JavaScript originated request
Params

confirm | boolean


ContentHeight

Gets height of HTML content

Return type : number


ContinueJs

Inputs a confirmation response to Js
Params

input | text


CreateShortcut

Creates a shortcut of given website on home screen
Params

url | text

iconPath | text

title | text


CreateWebView

Creates the webview in given arrangement with id
Params

container | component

id | number


CurrentId

Returns current id

Return type : number


DismissJsAlert

Dismiss previously requested Js alert

EvaluateJavaScript

Asynchronously evaluates JavaScript in the context of the currently displayed page.
Params

script | text


Find

Finds all instances of find on the page and highlights them, asynchronously. Successive calls to this will cancel any pending searches.
Params

string | text


FindNext

Highlights and scrolls to the next match if 'forward' is true else scrolls to previous match.
Params

forward | boolean


GetCookies

Get cookies for specific url
Params

url | text

Return type : text


GetIds

Returns a list of used ids

Return type : list


GetInternalHistory

Get internal history of given webview.
Params

id | number

Return type : list


GetProgress

Gets the progress for the given webview
Params

id | number

Return type : number


GetScrollX

Return the scrolled left position of the webview

Return type : number


GetScrollY

Return the scrolled top position of the webview

Return type : number


GetSslCertificate

Gets the SSL certificate for the main top-level page and raises 'GotCertificate' event

GetWebView

Returns webview object from id
Params

id | number

Return type : any


GoBack

Goes back in the history of this WebView.

GoBackOrForward

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.
Params

steps | number


GoForward

Goes forward in the history of this WebView.

GoToUrl

Loads the given URL.
Params

url | text


GrantPermission

Grants given permissions to webview.Use empty list to deny the request.
Params

permissions | text


HideCustomView

Hides previously shown custom view

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.

LoadHtml

Loads the given data into this WebView using a 'data' scheme URL.
Params

html | text


LoadInNewWindow

Loads requested url in given webview
Params

id | number


LoadWithHeaders

Loads the given URL with the specified additional HTTP headers defined is list of lists.
Params

url | text

headers | list


PageDown

Scrolls the contents of the WebView down by half the page size
Params

bottom | boolean


PageUp

Scrolls the contents of the WebView up by half the page size
Params

top | boolean


PauseWebView

Does a best-effort attempt to pause any processing that can be paused safely, such as animations and geolocation. Note that this call does not pause JavaScript.
Params

id | number


PostData

Loads the URL with postData using 'POST' method into active WebView.
Params

url | text

data | text


PrintWebContent

Prints the content of webview with given document name
Params

documentName | text


ProceedHttpAuthRequest

Instructs the WebView to proceed with the authentication with the given credentials.If both parameters are empty then it will cancel the request.
Params

username | text

password | text


ProceedSslError

Method for ProceedSslError
Params

proceed | boolean


Reload

Reloads the current URL.

RemoveWebView

Destroys the webview and removes it completely from view system
Params

id | number


RestartPrinting

Restarts current/previous print job. You can request restart of a failed print job.

ResubmitForm

Whether to resubmit form or not.
Params

reSubmit | boolean


ResumeWebView

Resumes the previously paused WebView.
Params

id | number


SaveArchive

Saves the current site as a web archive
Params

dir | text


ScrollTo

Scrolls the webview to given position
Params

x | number

y | number


SetCookies

Sets cookies for given url
Params

url | text

cookieString | text


SetVisibility

Sets the visibility of webview by id
Params

id | number

visibility | boolean


SetWebView

Set specific webview to current webview by id
Params

id | number


StopLoading

Stops the current load.

UploadFile

Uploads the given file from content uri.Use empty string to cancel the upload request.
Params

contentUri | text


ZoomBy

Performs a zoom operation in the WebView by given zoom percent
Params

zoomP | number


ZoomIn

Performs zoom in in the WebView

ZoomOut

Performs zoom out in the WebView

AdHosts

Sets the ad hosts which will be blocked

Property Type : write-only
Accepts : text


AutoLoadImages

Sets whether the WebView should load image resources

Property Type : read-write
Accepts : boolean


AutoplayMedia

Sets whether the WebView requires a user gesture to play media

Property Type : read-write
Accepts : boolean


BackgroundColor

Sets background color of webview

Property Type : write-only
Accepts : number


BlockAds

Sets whether to block ads or not

Property Type : write-only
Accepts : boolean


BlockNetworkLoads

Sets whether the WebView should not load resources from the network.Use this to save data.

Property Type : read-write
Accepts : boolean


CacheMode

Sets cache mode for active webview

Property Type : read-write
Accepts : number


CurrentPageTitle

Title of the page currently viewed

Property Type : read-only
Accepts : text


CurrentUrl

URL of the page currently viewed

Property Type : read-only
Accepts : text


DeepLinks

Sets whether to enable deep links or not i.e. tel: , whatsapp: , sms: , etc.

Property Type : read-write
Accepts : boolean


DesktopMode

Sets whether to load content in desktop mode

Property Type : read-write
Accepts : boolean


DisplayZoom

Sets whether the WebView should display on-screen zoom controls

Property Type : read-write
Accepts : boolean


EnableJS

Tells the WebView to enable JavaScript execution.

Property Type : read-write
Accepts : boolean


FileAccess

Sets whether webview can access local files.Use this to enable file uploading and loading files using HTML

Property Type : read-write
Accepts : boolean


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

Property Type : read-write
Accepts : boolean


FontSize

Sets the default font size of text. The default is 16.

Property Type : read-write
Accepts : number


InitialScale

Sets the initial scale for active WebView. 0 means default. If initial scale is greater than 0, WebView starts with this value as initial scale.

Property Type : write-only
Accepts : number


LayerType

Property for LayerType

Property Type : read-write
Accepts : number


LoadWithOverviewMode

Sets whether the WebView loads pages in overview mode, that is, zooms out the content to fit on screen by width. This setting is taken into account when the content width is greater than the width of the WebView control.

Property Type : read-write
Accepts : boolean


LongClickable

Sets whether to enable text selection and context menu

Property Type : read-write
Accepts : boolean


OverScrollMode

Property for OverScrollMode

Property Type : read-write
Accepts : number


PromptForPermission

Returns whether webview will prompt for permission and raise 'OnPermissionRequest' event or not

Property Type : read-write
Accepts : boolean


RotationAngle

Property for RotationAngle

Property Type : read-write
Accepts : number


ScrollBar

Whether to display horizonatal and vertical scrollbars or not

Property Type : write-only
Accepts : boolean


ScrollBarStyle

Property for ScrollBarStyle

Property Type : read-write
Accepts : number


SupportMultipleWindows

Sets whether the WebView supports multiple windows

Property Type : read-write
Accepts : boolean


UseWideViewPort

Sets whether the WebView should enable support for the 'viewport' HTML meta tag or should use a wide viewport.

Property Type : read-write
Accepts : boolean


UserAgent

Get webview user agent

Property Type : read-write
Accepts : text


UsesLocation

Whether or not to give the application permission to use the Javascript geolocation API

Property Type : write-only
Accepts : boolean


Visible

Returns the visibility of current webview

Property Type : read-only
Accepts : boolean


WebViewString

Set webview string

Property Type : read-write
Accepts : text


ZoomEnabled

Sets whether the WebView should support zooming using its on-screen zoom controls and gestures

Property Type : read-write
Accepts : boolean


ZoomPercent

Sets the zoom of the page in percent. The default is 100

Property Type : read-write
Accepts : number


6.Open Source

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

Kindly PM me if you want to donate :heart:
Hope this helps ! :grin:

26 Likes
From Website to App
When Webview get file upload option start support
What are some cool helpful extensions that ''Everyone should have''?
Webviewer Website Login PHP
No consigo ejecutar un alert o un promt
[Free] :bar_chart: ChartMakerPlus - an extension to make google charts
How do you create app PDF printer named or other name PDF scanner extension?
ESP32 - CAM OV2640. Module. WebServer
Setting web-viewer to desktop mode
How do you get the text from a returned web page through either Web or WebViewer components?
Problem downloading files
How do u select info from websites
Important please help
Uploading photos via an internet form does not work via the app's "WebViewer"
Crash in webviewer when clicking mailto link
Problem with Back button
InnerHtml Tabledata
WebViewer dont show videos (it just show a blank space)
Come fare Upload da app?
How can I run new window on webviewer?
Convert a dynamic website to an android app
How to unzip file in internal storage?
MIT App Inventor 2 & Highcharts data.csv configuration with RSSI and Distance Variables
CustomWebView and attempt to open download
How to update the permissions in manifest file
Password protected website (popup)
How can i made a HTML viewer?
Webviewer page loading problem
Can i trust WebViewer?
How to request microphone access for the webviewer?
. Cannot upload files to Google form through app 2. Button click Won't open mail compose menu in my external gmail app
I need Help in web viewer please
WebViewer and links inside web pages
Webviewer don't work
Webviewer does not save cookies, what to do?
Action call problem within WebViewer
New tabs not showing in Webview with Custom webview Extension
Download and view PDF's inside AI2 app through webviewer
QR Code scanner not working
How do I delete magnifying glass?
Download PDF inside webview
Connect cam ip login
Web view video not playing
Hyperlink not working

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?

1 Like

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

4 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

2 Likes

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.

2 Likes

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

ScrollView can host only one direct child

Any reason?

1 Like

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

2 Likes
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)

4 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:

2 Likes

That's why it is lite version :wink:

2 Likes

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:

3 Likes

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

2 Likes

Problem solved forgot about the container :sweat_smile:

1 Like

Version 8:

3 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)

1 Like

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.

3 Likes