sgNeoWebStudio

WebView2 • HTML5 • CSS • JavaScript • Local Web Apps • VisualNEO Win

About the plug-in

sgNeoWebStudio embeds the Microsoft Edge WebView2 browser engine inside a VisualNEO Win Rectangle object. It lets a VisualNEO publication host modern web content and communicate with JavaScript applications.

Features include browser navigation, HTML display, local file/folder loading, JavaScript execution, two-way messaging, browser events, zoom, console diagnostics, Tabulator grids, Quill rich-text editing and Apache ECharts visualisations.

Requirements and setup

Important: Create the Rectangle object in the VisualNEO page before calling the browser actions. Use the same Rectangle name in all actions referring to that browser instance. The action editor in the installed plug-in is the authoritative source for each action's parameter fields and ordering.

Action index

Action reference

sgNeoWebCreate

Create a WebView2 browser inside a named Rectangle. The initial URL is optional.

Parameters: Rectangle name; optional initial URL.

sgNeoWebDestroy

Destroy the WebView2 browser attached to a Rectangle.

Parameters: Rectangle name.

sgNeoWebNavigate

Navigate the browser attached to a Rectangle to a URL.

Parameters: Rectangle name; destination URL.

sgNeoWebNavigate "WebRect" "https://example.com"

sgNeoWebBack

Navigate backward in the WebView history.

Parameters: Rectangle name.

sgNeoWebBack "WebRect"

sgNeoWebForward

Navigate forward in the WebView history.

Parameters: Rectangle name.

sgNeoWebForward "WebRect"

sgNeoWebRefresh

Reload the current WebView document.

Parameters: Rectangle name.

sgNeoWebRefresh "WebRect"

sgNeoWebStop

Stop the current WebView navigation and pending resource fetches.

Parameters: Rectangle name.

sgNeoWebStop "WebRect"

sgNeoWebControl

Perform Back, Forward, Refresh or Stop using a selectable browser operation.

Parameters: Rectangle name; operation (Back, Forward, Refresh or Stop).

sgNeoWebSetHTML

Display an HTML document in the browser attached to a Rectangle.

Parameters: Rectangle name; HTML content.

sgNeoWebExecuteJS

Execute JavaScript in a Rectangle WebView and optionally store the JSON result in a NeoBook variable.

Parameters: Rectangle name; JavaScript source; optional result variable.

sgNeoWebExecuteJS "WebRect" "document.title" "[JSResult]"

sgNeoWebBridge

Configure JavaScript-to-VisualNEO messaging for a Rectangle. Incoming messages are stored in a variable and can trigger a VisualNEO action script.

Parameters: Rectangle name; message variable; optional action script (configure in the action editor).

sgNeoWebPostMessage

Send a text message from VisualNEO to the JavaScript page in a Rectangle.

Parameters: Rectangle name; message text.

sgNeoWebOnEvent

Configure a browser event callback. Supported events: NavigationStarting, NavigationCompleted, ContentLoading, TitleChanged, SourceChanged and ProcessFailed.

Parameters: Rectangle name; event name; destination variable and/or action script as configured in the action editor.

sgNeoWebGetInfo

Retrieve the current URL, document title, back/forward availability or WebView creation status into a VisualNEO variable.

Parameters: Rectangle name; information key; destination variable. Keys: URL, TITLE, CAN_GO_BACK, CAN_GO_FORWARD, WEBVIEW_CREATED.

sgNeoWebGetInfo "WebRect" "URL" "[BrowserInfo]"

sgNeoWebSetZoom

Set WebView zoom percentage from 25 to 500.

Parameters: Rectangle name; zoom percentage.

sgNeoWebSetZoom "WebRect" "125"

neoWebGetZoom

Get current WebView zoom percentage into a VisualNEO variable.

Parameters: Rectangle name; destination variable.

sgNeoWebLoadFile

Load a local HTML file into the WebView2 Rectangle. Relative CSS, JavaScript, image and other resource URLs resolve relative to the HTML file.

Parameters: Rectangle name; local HTML file path.

sgNeoWebLoadFolder

Load a local web application folder using its start page (index.html by default). Relative assets resolve relative to the start page.

Parameters: Rectangle name; application folder; optional start page if exposed by the action editor.

sgNeoWebDebugConsole

Capture JavaScript console.log/info/warn/error/debug, uncaught errors and unhandled promise rejections. Stores each JSON event in a variable and optionally runs an action script.

Parameters: Rectangle name; output variable; optional VisualNEO action script.

sgNeoWebDebugClear

Clear the VisualNEO variable configured for JavaScript debug console output.

Parameters: Rectangle name.

sgNeoWebDebugClear "WebRect"

sgNeoWebTabulator

Create or replace a Tabulator data grid in an HTML element. Requires the local Tabulator JavaScript and CSS assets in the loaded web application.

Parameters: Rectangle name; target HTML element ID; grid configuration/data arguments as exposed in the action editor.

sgNeoWebQuillEditor

Create or replace a Quill rich-text editor in an HTML element. Requires the local Quill JavaScript and CSS assets in the loaded web application.

Parameters: Rectangle name; target HTML element ID; editor configuration/content arguments as exposed in the action editor.

sgNeoWebECharts

Create or replace an Apache ECharts visualisation in an HTML element. Requires the local ECharts JavaScript asset in the loaded web application.

Parameters: Rectangle name; target HTML element ID; ECharts option/configuration arguments as exposed in the action editor.

neoWebPrepareAssets

Register bundled ECharts, themes, Tabulator and/or Quill files as VisualNEO publication dependencies. Components: ECHARTS, THEMES, TABULATOR, QUILL or ALL. Run during publication setup/design before publishing.

Parameters: Component selection: ECHARTS, THEMES, TABULATOR, QUILL or ALL.

JavaScript bridge overview

Use sgNeoWebBridge to configure the incoming JavaScript-to-VisualNEO channel. JavaScript can post messages to the host page using the WebView2 web messaging interface (for example, window.chrome.webview.postMessage(...)). Use sgNeoWebPostMessage to send text from VisualNEO to the page. The page-side JavaScript should listen for the WebView2 message event.

Included examples and libraries

Troubleshooting