Web View

This component embeds a web browser view into your Project. No browser controls are shown, only the page
itself.

The browser is provided by the operating system, so has the same features and limitations as that browser:

Windows: WebView2 (Chromium Edge)
MacOS: Safari
Android: Android web view (not Chrome)
iOS: Mobile Safari

The web view displays the default URL when first shown. You can use the Set Web View URL action to navigate the web view to a different URL.

Scrolling

On Windows, the web view component will not work correctly in a scroll panel since it cannot be clipped to the edges of the scroll panel.

Overlapping components

If a Web View component is overlapped by another Umajin component, it will be hidden. This will occur even if it’s only the outline of the component that overlaps, not the actual content inside it.

While in Umajin Editor 4.2 or later, it will also show an overlap warning message, to help you debug the problem. This does not occur in Umajin Editor Lite, or in a published app, because the end user cannot do anything about it.

Umajin displays your application using a graphics engine, like a game, allowing 3D graphics and effects. However some components use “native” controls, such as text entry or web browser. These will always be displayed over top of the rest of Umajin’s display. Umajin will hide them if another Umajin component needs to go over top (such as a menu).

Properties for Web View Component

Name	When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size	Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height on order to create a web view component thats size will be maintained across devices.
Default URL	Displays default Umajin URL which can be edited to display desired URL.
Clear on hide	If checked, the web page will be unloaded by setting URL to about:blank when a different app page is selected.

Actions

The action Set Web View URL (JS: set_web_view_url) will cause navigation to a new URL.

Events

The Web View Component has 3 special events that you can add actions to. These can be found under the Actions Tab.

On Progress	fires as the URL is downloading. Parameters: [url] the URL being loaded.
On Complete	fires when the component has completed loading the URL. Parameters: [url] the final URL that was loaded (in case of redirects this could be different to the original request)
On Error	fires when an error occurs loading the URL. Parameters: [url] the final URL that was being loaded. [error] The error message.
On URL Change	fires whenever the URL changes, even just the #anchor part. This can be useful to receive information out of the web page by encoding it into the anchor part of the URL using window.location.hash =. from Javascript on the page. Parameters: [url] the new URL. Note: not implemented on Android.

API calls

webViewRunJavascript Runs Javascript in the context of the web page.

Using WebView in Standalone Windows Apps

If you want to run your app standalone on Windows, you will need to install the WebView2 runtime, “evergreen” version. Umajin Editor and Umajin Editor Lite Windows installers will download and install WebView2 automatically.

Registry keys are no longer required as for versions of Umajin before 4.4, since the IE11 web view is no longer used.