Resources / Tutorial

Using JavaScript in the FileMaker Web Viewer

A step-by-step guide to running JavaScript inside a Web Viewer and talking back and forth between the page and your FileMaker solution — the foundation for charts, rich UI, and JS libraries inside FileMaker.

FileMakerJavaScriptWeb Viewer

A Web Viewer turns a FileMaker layout into a tiny browser, which means anything you can do on the web — charts, maps, interactive widgets, JavaScript libraries — you can do inside FileMaker. The trick is the two-way bridge: JavaScript calling FileMaker scripts, and FileMaker calling JavaScript functions. Here's the whole setup from a blank file.

Step 1 — Create a new FileMaker file

  1. Open FileMaker Pro.
  2. Go to File > New Solution.
  3. Name your file (e.g. WebViewerJS) and choose a location to save it.
  4. Click Save. The database window opens.
Create a new FileMaker file The new solution database window

Step 2 — Create an HTML field

  1. Go to File > Manage > Database.
  2. On the Fields tab, create a new text field named HTMLContent.
  3. Click OK to save the field.
Create the HTMLContent text field

Step 3 — Add the HTML template to the field

In Browse mode, click into the HTMLContent field and enter this template. It defines a function that calls FileMaker, and one that FileMaker can call:

<html>
  <head>
    <title>FileMaker Web Viewer</title>
    <script>
      function sendToFM() {
        FileMaker.PerformScript("ReceiveFromJS", "Hello from JavaScript!");
      }
      function receiveFromFM(message) {
        document.getElementById('message').innerText = message;
      }
    </script>
  </head>
  <body>
    <h1>FileMaker Web Viewer with JavaScript</h1>
    <button onclick="sendToFM()">Click Me</button>
    <p id="message"></p>
  </body>
</html>
The HTML template entered into the field

Step 4 — Add a Web Viewer to the layout

  1. Switch to Layout mode.
  2. Select the Web Viewer tool from the toolbar.
  3. Draw a rectangle where you want the Web Viewer to appear.
  4. The Web Viewer Setup dialog opens.
Add a Web Viewer to the layout

Step 5 — Point the Web Viewer at the HTML field

  1. In the setup dialog, choose Specify Custom Web Address.
  2. Enter a formula that renders the field's HTML inline: 
    "data:text/html," & YourTable::HTMLContent
  3. Enable Allow JavaScript to perform FileMaker scripts — this is what makes the bridge work.
  4. Set the object name to WebViewer in the Object Name field.
  5. Click OK.
Configure the Web Viewer to use the HTML field

Step 6 — Create a script to receive JavaScript calls

  1. Go to Scripts > Script Workspace.
  2. Create a new script named ReceiveFromJS.
  3. Add a single step: 
    Show Custom Dialog [ "Message from JavaScript" ; Get ( ScriptParameter ) ]
  4. Save and close the script.
Create the ReceiveFromJS script

Step 7 — Test the bridge

  1. Switch to Browse mode.
  2. Click the button in the Web Viewer.
  3. You should see a dialog with "Hello from JavaScript!" — JavaScript just ran a FileMaker script.
Testing the integration

Going the other way: FileMaker → JavaScript

The bridge runs both directions. To push data into the page, call a JavaScript function from a FileMaker script with Perform JavaScript in Web Viewer:

Perform JavaScript in Web Viewer [
    Object Name: "WebViewer" ;
    Function Name: "receiveFromFM" ;
    Parameters: YourTable::Message
]

That calls the receiveFromFM function from the template, which writes the value into the page. Trigger it whenever you want FileMaker to update the Web Viewer.

Passing data from FileMaker to JavaScript

That's the whole foundation: FileMaker.PerformScript to call in, Perform JavaScript in Web Viewer to call out. Once the round trip works, you can drop in any web library and treat the Web Viewer as a full UI surface inside FileMaker.

Want richer UI inside FileMaker?

Charts, dashboards, and JavaScript-powered interfaces built into the solution your team already uses. I do this work directly — let's talk about what you need.

Work with me

Read next

Tutorial

Integrating JSONata into FileMaker

Read it →