At FileMaker DevCon 2019, I led over one hundred FileMaker developers in six hours of learning and working with JavaScript. It was a good day. We learned a lot. We made lots of mistakes. We fixed those mistakes. We felt pangs of frustration with the web viewer object. And we shouted with satisfaction when we got the web viewer to render our chart or datatable. In those six hours, however, we had to gloss over a few things. I intend to double back and talk in detail that which I blew right by to give all attendees the fullest experience. So here I’ll discuss how to extract and use the FM Web Viewer Bridge code and scripts from the JSPlayground file to your own.

One note: If you didn’t attend the session, feel free to participate in this post and video. There’s a lot in this video I’ve skipped over. But never fear: through future videos and webinars, I’ll retread what we did in the DevCon session.

Extracting the FM Web Viewer Bridge code

Working with the FileMaker Web Viewer Bridge was sort of the culmination of the JS training session. We were able to integrate the C3 Charting library and cause it to change without the web viewer flashing as the code reloads and without the rendered chart losing its state. (Again, we’ll come back to this later in another video.)

But we worked with the Bridge API within the context of the JSPlayground2019 file. Which is fun to play in, but hardly useful for production custom apps. So here’s how to extract the FM Web Viewer Bridge code into your own file. Follow along in the video. I’ve also written down the steps below. It’s pretty simple to do, and once you’ve done so you can use that first extraction in all your projects going forward. Let’s dive in.

Video Explanation

(15 minutes)

Written Explanation

Okay. Here are the steps you need to follow to extract the C3 chart with the bridge functionality out of your Playground file.

Export the Code

Export the code we wrote using the red Export button on the top right of the JSPlayground.fmp12 file. This exports this single record and all its code into a .fmp12 file to your desktop.

In this file, there’s an HTML_Calc field, but it is a text field. You can update it to be a calc field so that you can continue to tweak the JS code and have the web viewer grab the latest code. Here’s the code for the HTML_Calc field:

Substitute ( Code_HTML ; 
 ["__Script__" ; Code_Script];
 ["__CSS__" ; Code_CSS];
 ["__Data__" ; Code_Data] ; 
 ["__Library__" ; Code_Library] ; 
 ["__Extension__" ; Code_Extension1] ; 
 ["__D3__" ; Code_D3] ; 
 ["__FileName__" ; Get(FileName)] 
  )

Set up the Web Viewer

Set up a web viewer object on any layout. It really doesn’t matter the layout since you’re going to use a script to load the code into the web viewer. In the example, I just use the base table. Clear out all the checkboxes of the web viewer object set up except the “Allow Interaction . . . ” one (the first one). And finally name the object in the inspector. I called mine “BridgeWeb”. But that can be changed and updated in the scripting.

Custom Function

There is one small custom function, RandomNumber, that I used in the CreateColors script to pick two random colors from a list. Use it or not.

Windows Users Only

If you’re on Windows, or if any of your clients that will use this chart are on Windows, you need to add one more field to the table of the context that the web viewer object is on. Add any text field–I call mine ‘CopyPasteTarget’– and set the field to the right off the layout. Name it “CopyPasteField”. This will only be used when the FM WebViewer Bridge API is working with a hash (the URL) that is more than 2000 characters. It’s just necessary. :/

Copy / Paste Scripts

The next step is to copy and paste the necessary scripts into your file. If you wrote the C3 chart scripts, then you’ll copy those along with the scripts that runs the FM Web Viewer Bridge API. Select each of these, then copy them. Finally paste them into your file. If you do it that way, you’ll get no broken script references.

Here’s the full list:

  1. Load Bridge Example: this is the script that loads the code from the HTML_Calc field into the web viewer. Adjust this as you deem necessary, changing contexts to get to the layout with the web viewer. Here’s one place you need to update the web viewer’s name if you changed it.
  2. C3 Chart Folder: These are the scripts we wrote in the session. Copy the entire.
  3. FM WebViewer Bridge folder: Some of these scripts we’ll keep and some we’ll delete once the folder is in our file.

Copy all of these scripts/folders at one time and paste them into your file at one time. That will prevent any broken script references from showing up.

There will be a few errors; most of these are just broken field references. As you paste the scripts in, each script with an error will open in the Script Workspace. Go through each of these and fix what’s highlighted in red.

Delete Some Scripts

We don’t need all the scripts in the FM Web Viewer Bridge folder. Here’s a list of the scripts you can delete.

  1. ClickOn
  2. Inlined
  3. All the “Set ENV” scripts
  4. Compile URL Copy
  5. IsWebViewer Loading
  6. Close Web
  7. Generate JSON object

As you delete them, test to make sure you haven’t broken anything. To be super-sure, use FMPerception to find unreferenced Scripts.

Complete

After the above steps, you should be complete. You’ve successfully extracted the FM Web Viewer Bridge Code. The scripts and the functionality is copied from the JSPlayground file to your own custom app. From here you can use your file as a template.

If you do implement more than one bridge set up in your app, simply copy over that integration’s scripts. You shouldn’t have to recopy the Bridge scripts. It should be ready to go.

On Going

In the near future, we will continue our study of FileMaker & JavaScript. If you attended the session, I’ll have more videos and posts regarding stuff I had to gloss over. If you didn’t attend, I can lead you on from the beginning. Stay tuned for the plans we have.

Okay. Here’s the file

I planned on not uploading the file that I demoed here, but decided to reverse course. The more people that see and experience JavaScript in FileMaker, the better. So here’s the file. Pick it apart. And feel free to let me know if you have questions about it!