It’s well known that we have advocated for using JavaScript in Claris FileMaker for many years. Both yours truly and Todd, separately and now together, talk JavaScript and its use in our platform. Todd realized the language could be used in FileMaker since the moment the web viewer was introduced in FileMaker 8.5, and I. . . well, eventually I figured it out (FileMaker 15, I think it was). We know that JavaScript is native to the platform (always has been) and provides a better–more interactive and modern–experience for users, whether showing them animated graphs or crunching calculations. It just makes sense to use JS in FM.

Problem

But there were always problems with with the implementation of JavaScript in FileMaker. It wasn’t FileMaker’s fault necessarily. The problems centered around how to get data from FileMaker into the web viewer, and how to get data out of the web viewer effectively. The problems had to do with refreshing the web viewer or the opposite–leaving the chart in the current state. And problems centered around working in all areas of the platform (WebDirect, I’m looking at you!).

Attempted Solution

Todd tried to solve the many problems by creating the FM WebViewer Bridge, a library to pass data back and forth to the web viewer’s code. It worked mostly very well. Many of our products relied on the Bridge, and I taught a training session at FileMaker DevCon 2019 where we spent at least 3 hours working with the Bridge. It worked. Mostly. (WebDirect, I’m still looking at you!)

Real Solution

But now, in Claris FileMaker 19, we no longer have to use the FM WebViewer Bridge. If you’ve ever used it, you can throw it away! Stop using it. This ‘escape hatch’ (as Todd calls these things) is no longer necessary; we have in FileMaker 19 all we need to solve most of the web viewer problems. The new functions provides so much more flexibility and functionality that the Bridge ever could achieve. (This fact, of course, is because Claris built a bridge-like component into FileMaker itself). And if you’ve never used the FM WebViewer Bridge, don’t. Don’t try to learn it. Just forget about it.

Full disclosure: Todd has always advocated for tossing out the Bridge once this functionality arrived and you’re using FileMaker 19; I’m not being insubordinate.

Of course, if you’re still working in FileMaker 16-18 you have to use the FM WebViewer Bridge. If you care about WebDirect, however, FileMaker 19 and the new functions are a must.

Communicating Better with JS Libraries

Claris FileMaker 19 introduces the Perform JavaScript in Web Viewer script step and a JavaScript function named FileMaker.PerformScript(). With these two functions we can work almost perfectly with JavaScript in the web viewer–whether you choose to build them yourselves, of if you choose to use a JavaScript widget add-on. No matter your path, these two pieces of functionality will greatly enhance your users’ experience.

Let me give you a brief description and use of each, but also let me say that Todd and I will be hosting some coding parties and Office Hours once in awhile to demonstrate working with this new bag of functionality in the upcoming weeks. Stay tuned. If you want to work with these functions, we’ll show you how and give you our insights into their use. We’ve spent the last nine months wrestling with the script step and the JS function, so we have lots of insight about how to use these.

Back to the brief description. I’ll include an example I’m working on. Here’s the end result:

It’s it beautiful?

This sliders add-on (or it will be an add-on) was meant to take a found set of records and render them as such. Each question could contain the actual question, a set value, and a disabled option. The way I built this could handle any number of questions and, eventually, different range scales for each question. There’s a lot of possibilitiy.

NOTE: This is a bit of a complex example, but the principles that I illustrate will apply to simple and to complex ones. I’ll include a simple example on this post.

The script that runs this starts by first collecting the questions from the table, collecting the configuration of the sliders (as in the colors, range, etc). The script then loads the JS code from a field into the web viewer.

The Functions Themselves

The Perform JavaScript in Web Viewer Step

This step is our key to interacting with the JavaScript inside a web viewer. It takes a few parameters:

Object Name: the name of the web viewer object on the layout. This is an important parameter (other than being required). You could have on a layout multiple web viewers, and you could have multiple scripts that update each one. So name your web viewer and provide the name here.

Function Name: this is the JavaScript function ( case matters here) that’s in the web viewer (the browser). It’s cool to note here that JavaScript has a lot of built in functions, so you don’t even need a written JS function in the web viewer’s browser.

Parameters: the parameters indicate what you want to pass to the JavaScript function. You can pass 0 or more parameters (called “arguments” on the JS side) into the function for its use. We typically pass a JSON object into the function, but you can pass many parameters. Each one is then picked up by the function and used in some way. Here’s an example (made up, for sure).

In my sliders example, I’m using this step to actually load the data and the configuration into the JavaScript code. Notice line 13 in the image below. I’m using this step to tell the web viewer what function to run–setInitialFMProps()–, and I’m passing to the function a JSON object in the $json variable.

The JavaScript Function

Inside my JS, I’ve got a callback function to FileMaker. It looks like this:

You can see window.FileMaker.PerformScript("ChangeData",obj) is the function.

The ‘window’ part of the function is something I added. I wanted to make sure this function was available globally.

The “ChangeData” is the name of the script. Here Case doesn’t matter; FileMaker can find a script called “Changedata” or “ChangeData” or “changedata”.

And finally, I’m passing back to FileMaker the value of the obj JS variable.

Considerations

If you’re reading this post and have never used JavaScript, you might be a bit lost; never fear. We at Geist Interactive will lead some coding sessions where we walk you through it and answer questions. So look for that.

But if you’re already familiar with working with JS and web viewers, here are some considerations:

  1. The JavaScript function “FileMaker.PerformScript()” must be loaded into the web viewer before you try to call it. It must be available. We use window. to put it in the global space.
  2. You can pass a JSON object from FIleMaker to the JavaScript function you call via a script. But that object is really just a string, so you have to use JSON.Parse to convert it to something JS can read and parse.
  3. Passing a JSON object from JS to FileMaker requires a JSON.Stringify() call on your JavaScript object. You can see the example above.
  4. ERROR: The Perform JavaScript in Web Viewer script step returns error 5 if it wasn’t able to actually call the designated function. Careful to trap for this because the next steps in your script could depend on the web viewer being loaded.
  5. All of this works on WebDirect by the way (WebDirect, I forgive you!).
  6. There is an issue with refreshing the web viewer on WebDirect. We’ll provide more detail in other posts.

There are other considerations to think of, and we’ll explain those shortly. But the key is that these two features provide MUCH BETTER collaboration between FileMaker and JavaScript.

Onward

So give it a try. . .

. . . Or, if you’re not yet learning JavaScript, look out for add-ons and sample files that demonstrate the usefulness of these two steps. As I said in a recent podcast episode, even if you never touch these two steps, the add-ons you eventually use require these, so it’s necessary to have at least a passing understanding of what’s happening.

We’ll be back to demonstrate in videos and live coding sessions how to use these functions. We’ll also provide our recommendations for learning JavaScript. Don’t worry; we won’t require a master’s level understanding of JS. There’s a lot you can do with just a few basic JavaScript skills.