FlexFM Widgets for FileMaker apps

There was so much cool stuff at FileMaker Devcon this year. On top of the headliner features like ESS, it was really inspiring to see some of the amazing new FileMaker plug-ins that have come out to fully tap the possibilities the WebViewer object. Todd Geist of Geist Interactive has teamed up with MonkeyBread Software and created a developer-friendly FileMaker version of the versatile MBS plug-in for Realbasic. This plug-in does so much more, but one of the most exciting features of this Swiss-Army-knife of a plug-in are the WebViewer functions. Here is a sampling of possibilities taken from Todd’s Web site:

• Call FileMaker Scripts from Web Pages.
• Read and write directly to and from Web Forms.
• Call JavaScript functions from FileMaker.
• Dynamically control the content of the Web Viewer.
• Makes Data URLs even more useful!
• Include interfaces built with AJAX/DHTML and Flash on your FileMaker layout

…so I’m thinking, “Hmmm, call FileMaker Scripts from Web pages; interfaces with Flash on your FileMaker layout? Me like!”

Then there was Digital Fusion’s Fusion Reactor plug-in. Digital Fusion has taken a different approach, creating a plugin which essentially puts a local Web server inside the FileMaker plug-in space. This gives them the ability to display any kind of Web content, even on stand-alone FileMaker files. Here is their bullet list:

• Drag and Drop
• Live as-you-type portal filters
• Slider controls
• Dynamic buttons, popup menus and fields
• Animated Photo Gallery
• Drag-sortable lists
• Image manipulation tools

…so I’m thinking, “Hmmm, live as-you-type portal filters; drag-sortable lists on your FileMaker layout? Me like!” Of course, some of this is convenience packaging for things that have been possible without plug-ins since the advent of the WebViewer object and before. But both of these plug-ins offer an exiting enhancement which just makes my eyes twinkle: the ability to trigger scripts in the FileMaker users’ session context by interaction with WebViewer content. Sweet! So of course the first thing I did when I saw some of the demos Digital Fusion was using to showcase the Fusion Reactor plug-in was start pushing the boundaries of what I could do with FlexFM without a plug-in. The first thing I did was a little textFilter widget that updates a filtered portal as-you-type. No problem.

I showed it to Scott Love and he said, “That’s nice, but show me a tree object I can use for navigation.” Okay, here’s the tree object, and it can interactively exchange data with the FileMaker solution, but you will need one of the plug-ins to fire the nav scripts in the user context.

Then I saw Andy LeCates’ demo of dynamically changing text on a FileMaker layout using the new FileMaker 9 Conditional Formatting feature, and I thought, “There’s a perfect Flex slider object demo.” The slider widget changes point size of native FileMaker text.

Okay, all that’s nifty, but then I had my best inspiration yet: a progress-bar widget. This thing listens to a FileMaker field in the background, so during lengthy FileMaker processing scripts, FileMaker developers can put the process out of sight, leaving the progress bar showing the FlexFM widget in a WebViewer, actively monitoring the main processing script as it updates a status field. Nice!

So how can you do all this? Well, first of all, none of this works without one of the following: a FileMaker Server hosted solution with XML web publishing turned on; MBS Plug-In for FileMaker; Fusion Reactor plug-in for FileMaker. If you have at least one of those prerequisites, you can set up these or any other Flex UI component you care to build. The way I have done it is with option one, FileMaker’s XML web publishing and FlexFM. Setting aside how to create the swf widgets themselves for a moment, the setup involves setting some basic config info in an xml file, and pointing a web viewer at a swf with a simple argument concatenated onto the url. Here is the WebViewer expression for the progress bar shown above:

"http://localhost/progress.swf?sesID=" & $sesID

In this case, all the FileMaker Server components are running on my local machine, and I have two files in the local Web root, but the FileMaker Server could be anywhere the user can access it on the WAN or LAN:

progress.swf
progress.xml

The first file is the widget (a mini FlexFM application) which begins running as soon as it is instantiated, and the second file is where I have abstracted the config variables so that the compiled swf can be used on any FileMaker Server with any FileMaker solution. The contents of the config file are simply:

<root>
<myHost>localhost</myHost>
<myDatabase>350000_PersonRecords</myDatabase>
<myLayout>web_session_id</myLayout>
</root>

When the swf is called in the WebViewer, FileMaker has concatenated a session record ID onto the url. The swf loads and reads the host, database, layout, and session ID variables. With this information, it is simple for it to write back to the FileMaker file in a location that is known to both the stateless web call, and the persistent FileMaker session. This is all you need to be able to pass data bi-directionally between FileMaker and Flex. Similar concepts can be employed with augmentation from MBS and/or Fusion Reactor, extending the possibilities by giving the FlexFM app the ability to trigger FileMaker scripts in the user’s session context. I’ll post more details on how to set up these four examples as pre-compiled widgets (no need to modify in Flex Builder), and source code so you can pick apart and roll your own once you grok the concept.

Jeremiah