WidgetStudio for FileMaker – Integrating Javascript Elements Easier

Geist Interactive recently released an exciting new product for FileMaker developers called “WidgetStudio”.

WidgetStudio makes it easier to use common JavaScript/HTML/CSS interface objects within FileMaker. It utilizes the FileMaker web viewer. Similar to LuminFire’s fmFlare, WidgetStudio is a modular product. It consolidates common code in one place and makes it easier to edit, use, and distribute.

We recently got a personal demo of the tool by the author Carson Lind at our local FMPUG-MN meeting.

The standard interface of WidgetStudio doesn’t show any code. You see a preview sample of the widget on the right and a list of configuration options, similar to the FileMaker inspector on the left side. Widget options can be static values baked into the deployment or variables that can be populated from your data.

There are three deployment options for each widget:

1. Embedded Web Viewer – All options are baked into the web viewer. This is great for testing. Variables are in a Let statement at the top of the WebViewer calculation. Note there is a limit of 30,000 characters in a FileMaker calculation, so this isn’t great for larger chunks of JavaScript.
2. Scripted Rendering – Chunks the JavaScript text into variables in a script. Data is sent to a named web viewer object with a blank address calculation.
3. Scripted Export – Exports the JavaScript to a temp directory. Required if using the web viewer bridge. Also allows exporting data as PDF, CSV, etc.

There is a hosted widget library online that will continue to get additional functions as time goes on. Widgets built in WidgetStudio can be shared easily with other developers as a JSON text file. You can lock a widget when it’s deployed to save parameters for a certain deployment. Then you can unlock or duplicate it for other deployments was well.

There is an icon to indicate that the widget is tested on the Windows platform. There are some differences in what JavaScript will work with the built in Internet Explorer-based web viewer on the FileMaker Windows client.

Widget Studio includes a full code editor for HTML, CSS, and JavaScript that includes an advanced find and replace feature. You can add variables to the code which WidgetStudio will detect so they can be added to the inspector-like configuration interface for the widget.

Widgets can be created so that they work offline completely if desired. Often, however it is good to use a CDN (Content Delivery Network) to deliver required JavaScript libraries fast and reliably. This is a common development pattern in the web world, but it may be new territory for many FileMaker developers.

The free version of WidgetStudio gives you all the capabilities for testing but is limited in that you can only deploy the three included demo widgets. You can use the special promo code “UG201920” to get 20% off all Geist products including Widget Studio until the end of the year.

At LuminFire, we’ve been using JavaScript integrations for some time. We’re excited about using WidgetStudio to make that easier and make the code more portable and modular. It will help to make our solutions even better. We’re excited about the possibilities.