Using the FileMaker WebViewer Bridge

We continue our study of FileMaker & JavaScript.

The web viewer object gives us a lot of possibilities to bring interactive, modern interfaces into FileMaker. We can build for our clients an interactive chart or a full-featured list.

The web viewer object is powerful, but there’s some limitations and some quirks. We’ve written about this before.

Enter the FileMaker WebViewer Bridge: a free JS library that solves a lot of the main interface issues.

In the FileMakerDevCon 2019 training session, we spent quite a few hours working with the FileMaker WebViewer Bridge. We spent some time first learning all about it, and that’s what we’ll do here. Take a look at this page to review how the FM WebViewer Bridge works.

Let’s begin.

Walkthrough

Below are videos that describe how to work with the FM WebViewer Bridge. It’s recommended to watch them in order and see how it all connects.

Getting the File

You can download the file with the button below. It contains the Progress Bar integration we will use to explain the FM WebViewer Bridge.

Download the File

(Click to Play)

In this video we take a look at the FileMaker WebViewer Bridge and its purpose and its magic.

(Click to Play)

Using the Progress bar example found in the JS Playground file, this video shows how a JavaScript integration is connected to the bridge and how the entire app is loaded into the web viewer.

(Click to Play)

Working with web viewers on the Windows OS requires some special attention. In this video, we talk about those things to be aware of and how the FM WebViewer Bridge set up handles these issues.

The Two Examples

Take a look at these two examples to see how the FM WebViewer Bridge is incorporated into a web viewer widget. It’s actually pretty simple to get set up.

Click on an image to begin your study of that example.

DataTables

In the DataTables example we take the standard DataTables integration and connect it to the FM WebViewer Bridge. We then write FileMaker scripts that cause the JavaScript to update the table. We write scripts to:

Group the data.
Swap two columns around.
Move all the columns.
Add a row of new data.
Clear the whole table and add multiple rows.

Follow along in these videos with the JS Playground file.

C3

In the C3 example we take the standard C3 integration and connect it to the FM WebViewer Bridge. We then write FileMaker scripts that cause the JavaScript to update the chart. We write scripts to:

Change the data in the chart.
Transform the chart from a line to a bar chart.
Group two series together (stack the bars).
Change the colors.

Follow along in these videos with the JS Playground file. You can also see a finished version here.

General Videos

We’ve got some tutorials that apply generally to the work you’ve done with the JSPlayground file and with JavaScript in general. They will be posted here. Check back soon!

FileMaker & JavaScript

Head back to the FileMaker & JavaScript page to continue your study.