Intro to Carafe: The Open-Source FileMaker-JavaScript Solution

Web viewers first appeared in FileMaker 8 to allow users to display various forms of content. It didn’t take long for developers to figure out how to leverage them to display html and JavaScript, which greatly expanded their power. Now there are thousands of open source JavaScript libraries allowing users to visually represent data in seemingly endless ways.

The Problems with JavaScript in FileMaker

Unfortunately, there is a downside to this method of powerful, free data display. Implementing JavaScript libraries can be very difficult. It’s not impossible, but it takes a JavaScript expert to gather and assemble the proper resources and get everything to the full working state that you desire.

Even though the concept is the same for each library — find and load the necessary resources and then load your data — they don’t all work the same. Besides the JavaScript library, you are trying to work with, you probably need additional JavaScript libraries to get your web viewer functioning properly. There’s also a good chance you need CSS resources. This leaves you with the decision of whether to load these libraries and CSS locally or to reference them.

The difficulties don’t end there. Let’s say you’ve got your resources and data loaded, one way or another, and you go and test this in your application. You find your web viewer is a sad, empty box. How do you debug this? Making changes and re-testing relies heavily on the use of your clipboard and prayer. And if you do get it working and then want to make changes to your working web viewer, how do you handle that? More clipboard and more prayer. One wrong paste and you’ve lost the working version. You can use a text editor to store your “versions,” but that’s just clunky and confusing.

Not that testing any of this is a piece of cake either. It’s difficult to work directly with the data in the web viewer. And again, you need to try something like saving the content to a text editor as html and then load that in a browser. This leaves you a few steps removed from FileMaker and your web viewer, where you actually want the JavaScript working.

Carafe: A Free, Open-source Solution

That’s why Soliant created Carafe, an open source package manager for implementing JavaScript libraries in FileMaker. It comes with a number of pre-written bundles like Google Maps and Data Tables. It’s simple to add these features to your application:

1. Click the Deploy button on the bundle detail.
2. Go to your solution and paste the script that is now in your clipboard into your script workspace.
3. Add a web viewer to your layout.
4. In the Configure portion of your imported script, set the $webviewerName variable to the object name of your newly created web viewer.
5. Call the script with your data as JSON in the script parameter as described in the comments.

Voila! You now have a web viewer displaying your data. This is where the fun really starts.

Versioning Capabilities

Carafe allows versioning, which helps users to try out changes without losing the critical working version. When you want to make changes to your bundle, use the Edit Bundle button, which opens your bundle in CodeSandbox. In CodeSandbox you can do all the testing you want by playing around with the JSON files and seeing the results. When you are satisfied with the changes, the Send to Carafe button will export your changed bundle back into Carafe with a new version number.

Community Collaboration with Carafe

You are not limited to the JavaScript libraries currently included in Carafe, either. You can add any JavaScript library. You can even share bundles with other developers in the community using a simple export/import of bundles from one developer’s Carafe to another. Simply clicking the Share button on your Carafe bundle creates a JSON export file which another user can bring into their Carafe file by using the import button.

Getting Started in Carafe

I hope you take the time to download Carafe, try it out, and join our community of developers building and sharing bundles. It’s free, easy, and pretty cool. Start using Carafe today.