Creating Custom Web Viewer Windows in FileMaker with MBS Plugin

Creating Custom Web Viewer Windows in FileMaker with MBS Plugin

The MBS FileMaker Plugin expands FileMaker's capabilities significantly. One particularly powerful feature is WebView.CreateWindow, which allows you to create fully independent web viewer windows with advanced JavaScript integration. Added in version 16.2.

What is WebView.CreateWindow?

This function creates a new, separate window containing a web viewer. Unlike FileMaker’s built-in Web Viewer, this window is independent and can be fully controlled via MBS functions.

The WebViewer used in the window is the same as in FileMaker Pro. We use WebKit 2 on macOS and the Microsoft Edge based WebView2 control on Windows. This way we have modern engines provided by the OS.

Syntax

MBS("WebView.CreateWindow"; X; Y; Width; Height { ; Flags })

Parameters

Flags

Basic Example

This creates a window and loads a webpage into it:

Set Variable [ $web ; Value: MBS("WebView.CreateWindow"; 200; 200; 500; 500) ]
Set Variable [ $r ; Value: MBS("WebView.LoadURL"; $web; "https://example.com") ]
Set Variable [ $r ; Value: MBS("Window.SetTitle"; $web; "Example") ]
Set Variable [ $r ; Value: MBS("Window.Show"; $web) ]

JavaScript ↔ FileMaker Communication

This is where WebView.CreateWindow becomes especially powerful. You can establish two-way communication between JavaScript and FileMaker scripts.

1. Calling FileMaker Scripts from JavaScript

In JavaScript, you can trigger a FileMaker script in the current file:

FileMaker.PerformScript("My Script", "Hello from JavaScript");

This allows your web UI to directly trigger FileMaker logic.

2. Using Script Options

The PerformScriptWithOption function provides an additional flag to define how the script is triggered:

FileMaker.PerformScriptWithOption("My Script", "param", 3);

We have these options:

3. Evaluating FileMaker Functions from JavaScript

Instead of triggering a script, you can use Evaluate() in JavaScript. This allows you to directly query variables, fields or call Get functions.

Please note that this function is asynchronous, so you need to use await to have the JavaScript code wait for the result in a thread friendly manner:

let result = await FileMaker.Evaluate('Get(FileName)');
console.log(result);

This is extremely useful for retrieving data dynamically from FileMaker. Whether you like to query global variables, run Get() functions, query data via SQL or call custom functions.

4. Building a Simple Bridge Pattern

A common pattern is to build a small JavaScript wrapper:

async function fmEval(expr) {
  return await FileMaker.Evaluate(expr);
}

async function fmGet(expr) {
  if (!/^[A-Za-z0-9_]+$/.test(expr)) {
    throw new Error("Invalid Get() expression");
  }

  return await FileMaker.Evaluate(`Get(${expr})`);
}

function fmScript(name, param) {
  FileMaker.PerformScript(name, param);
}

This makes your code cleaner and easier to maintain.

5. Sending JSON Between JavaScript and FileMaker

For complex data, JSON is the best approach to pass multiple parameters:

// JavaScript
let data = {
  action: "create",
  id: 123,
  name: "Test"
};

FileMaker.PerformScript("HandleJSON", JSON.stringify(data));

And in the script we parse the parameter:

# FileMaker script
Set Variable [ $json ; Value: Get(ScriptParameter) ]
Set Variable [ $name ; Value: JSONGetElement($json; "name") ]

6. Handling Async Behavior

FileMaker.Evaluate is asynchronous, so always use await or promises.

async function loadData() {
  let user = await FileMaker.Evaluate('Get(AccountName)');
  document.body.innerHTML += user;
}

or with promises:

function loadData() {
  FileMaker.Evaluate('Get(AccountName)')
    .then(user => {
      document.body.innerHTML += user;
    })
    .catch(error => {
      console.error(error);
    });
}

Best Practices

Keep in mind, that you can only allow the Evaluate() if you trust the JavaScript running. Additionally keep in mind these best practices:

• Always validate incoming script parameters

• Use JSON for structured communication

• Keep a clear separation between UI and logic

• Wrap FileMaker calls in helper functions

• Only enable required flags for security

• Check fmplugin extended privilege to allow or disallow plugin access to other files with SQL.

Conclusion

WebView.CreateWindow is more than just a way to display web content—it enables building full hybrid apps inside FileMaker using modern web technologies.

With proper JavaScript ↔ FileMaker communication patterns, you can create responsive, powerful, and maintainable solutions.