Skip to main content

Testing and Developing

Runtime Environment

The runtime environment of the UI Extension is inside sandboxed <iframe /> and communication between the M-Files Client and UI Extension is done internally using postMessage where the calls are serialized using Structured Clone algoritm.

When a call to an UI Extension Object is done, for example

const commandId = await shellFrame.Commands.CreateCustomCommand(name);

The call is serialized into a postMessage message using MESP protocol (M-Files Extension Sandbox Protocol). It is possible to enable logging of the postMessage calls if you want to observe exactly what is going on during execution of specific command.

The global variables, like Enumerations are binded into MFiles variable only after the initialization message.

Debugging from Developer Tools

From the browser developer tools you can select the IFRAME and observe the global variables installed there.

Calling ICommonFunctions

MFiles global variable includes enumerations and also the ICommonFunctions properties and methods.

// Call ICommonFunctions.GetAccentColor()
await MFiles.GetAccentColor() // returns "#006eef"

// Save a key into webstorage
await MFiles.WriteToWebStorage("key", "value")

Accessing the Dashboard object

In the Dashboard code you can access the dasboard object using _MESP global variable.

// retrieve the active dashboard object inside a Dashboard IFRAME
const dashboard = _MESP.ApplicationObjects.Dashboard;

// Create a popup dashboard with ID "my-dashboard"
await dashboard.ShellFrame.ShowPopupDashboard("my-dashboard", {});

Enable postMessage logging

If you want to enable logging of the postMessage commands into the Developer Tools console you can turn that on inside the UI Extension application using

// Enable logging of postMessage calls into console
window._MESP.logLevel = "all";