BlogFileMaker

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

By April 17, 2019 6 Comments

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.

Phil Yaffe

Phil Yaffe

Phil Yaffe is a Technical Project Lead with Soliant's Chicago office.

6 Comments

  • Avatar Carles Barbal says:

    Hi Phil,

    Thank you very much for putting Carrafe to those of us who are not experts in Javascript. Can the example of the calendar be translated into Spanish in any way?

    The examples are very good for developers who use English with their clients, but those who have to do it in other languages such as Spanish and Catalan is more complicated.

    Regards,

    Carles

  • Avatar Carles Barbal says:

    Hi Phil,

    The one I’m interested i is Calendar v1.1.1. I’ll look at the links.

    Thank you

    Carles

    • Phil Yaffe Phil Yaffe says:

      Carles- If you have more questions or suggestions, it is probably a good idea to leave comments on this bundle (or any particular bundle) on the bundle detail page at the Carafe website: Calendar v1.1.1

      -Phil

  • Avatar Nick Gaunt says:

    Hi Phil

    I was excited to hear about Carafe as I have developed a variety of Javascript webviewer apps that run on FM Go (interactive Leaflet maps, GPS tracking functions, timers and so forth) and it is certainly not trivial to achieve good results! I was hoping to use Carafe to help with development and deployment but then read that it uses BaseElements, which is only compatible with FMGo by using the SDK. Does this mean that I cannot use Carafe to deploy apps on FMGo unless one has access to the SDK?

    Nick

    • Phil Yaffe Phil Yaffe says:

      Hi Nick-

      The BaseElements plug-in is required for only one part of Carafe, which is the deployment of scripts (the copy) from Carafe to your FM app. The bundle being implemented runs fine without BE. So you will need BE to deploy a script, but you can’t do that kind of FM work in FMGo anyway.

      Good luck- Phil

Leave a Reply