Over the three years I’ve been here at Geist Interactive, I’ve shared quite a few web viewer widget demo files. They were meant to show what is possible in FileMaker using JavaScript. They were meant to inspire. And they worked well. In all cases, useful UI elements were added to a layout; audio players, C3 Charts, and date pickers are among the examples.

More For Me to Do

Now that we have FileMaker 19, I (slowly) am going through the files and am updating them for FileMaker 19. In most cases, the old file would work in FileMaker 19. However I wanted to get them updated because the functionality in FileMaker 19, the solves a lot of problems with web viewers we’ve had for ages. It was good practice, and, as it turns out, is a good demonstration. So here’s my first attempt using the Perform JavaScript in a Web Viewer step. I’ll do so using the audio player.

Before and After

Here’s what it looks like before FileMaker 19:

And here’s the widget using FileMaker 19.

Both widgets still play a file in a container field. Both still toggle the mute of the player, and both update the speed of the playback.

FileMaker All the Way!

There is a subtle and super-powerful difference. In the former image, I’m using HTML buttons to control the playback. In the latter image I’m using FileMaker buttons and scripts to run the playback, the mute, and the speed.

The difference is that I know FileMaker much better than JavaScript, so I can use FileMaker to completely control every part of this. I can control when the file gets played, when it gets stopped. I control its playback speed, and I even can control which file gets loaded.

Since a FileMaker developer can now control these functions using Perform JavaScript in a Web Viewer, she doesn’t have to rely on a JavaScript developer (or me) to update the code to, say, play it back at 1/2 speed–the JS function attached to that button is not set to use 0.5 as a speed. As the author of this demo file, I don’t have to plan for EVERY use case all the people who download this might want. I can set FileMaker scripts and script parameters with some basic info and let anyone change a lot about this.

So I’ve updated the audio player to use to use Perform JavaScript in a Web Viewer. The following video shows the steps I took to update the widget. My goal was to demonstrate how to use the new FileMaker features so that anyone can take this file they previously downloaded and update their audio player. Extracting the concepts, you can apply the steps I took to any file.

My First Steps

So I present to you my first update:

In the above video, I just focused on using FileMaker scripts and buttons to control the playback. And this is how I did it.

I took this normal JavaScript function that was run by a button:

function playPause () {
  wavesurfer.playPause();
  var element = document.getElementById("play");
  var btnText = element.innerHTML;

  if (btnText === "Play") {
    element.innerHTML = "Pause";
  } else {
    element.innerHTML = "Play";
  }
};

and made these changes:

• Exposed the function to the global window object
• Removed some functionality that updated the HTML buttons

Here’s what it looks like now:

window.playPause = function () {
  wavesurfer.playPause();
};

The window. exposes the function to the global window object and, in effect, exposes it to FileMaker so that the Perform JavaScript in a Web Viewer step will call the function.

Now I wrote a script that calls Perform JavaScript in a Web Viewer:

And now a FileMaker button can play or pause the audio file.

Cool.

More Coolness

As I was editing it, I realized I could do one more thing: use FileMaker script to load the file into the widget. Todd demonstrated that in the webinar he and Claris recently shared. He used the Data Tables library, demonstrating just the end result: how to load the data.

I was inspired by this demonstration to set it up for the audio player. As a result I can use a FileMaker script to load ANY audio file (as base64) into the widget to play, again using the step Perform JavaScript in a Web Viewer.

Isn’t that even more cool?

Here’s the video showing how I did that.

So there you have it. A newly updated version of the audio player for FileMaker 19. If you’ve already downloaded this file before, please take a few moments to watch the video and to follow my steps in the conversion process. It won’t hurt and you’ll learn a new skill.

If you don’t have FileMaker 19 yet (gasp!) feel free to continue to use the old version.

Here’s the newest version, all ready for you in FileMaker 19. But, again, give what I described above a try before just using this one :).

In my next post (written here on a Saturday night) I’ll update the date picker using more FileMaker 19 functionality.