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";