FileMaker + JQuery + Reactor + UniForm = Cool

I have been working on building some Rich UIs for FileMaker using the Rector Plugin from Digital Fusion. I really like this plugin. It lets me do just about anything I want with FileMaker Web Viewers. In this little example video, I show off a custom login screen built with JQuery, Uni-form, and Reactor.

I love the way Reactor lets me package up my Web Widgets as an external function. This makes it simple to deploy and use. In this case I included support for 3 different themes. The theme that is used is determined by passing a parameter to the External Plugin funciton that I created using the BlackBoxBuilder that comes with Reactor Adv Developer license. It looks like this

LoginBox("blue") - displays the "blue" theme

LoginBox("dark") - displays the "dark" theme

LoginBox("") - displays the default theme.

I am using the FRToolBox.js javascript library that comes with Reactor to call FileMaker Scripts from within my web widget., and also to instruct the web app what to when a something happens in FileMaker by calling JavaScript functions that I have exposed as sort of an API.

To call a script in fileMaker from JavaScript you do something like this:

FRTB.script(scriptName, params).send()

where "scriptName" is the name of the FileMaker Script to run and "params" is the text string to pass to the script as Script Parameter. And to call A JavaScript function in the FileMAker Web Viewer from a FileMaker Calculation or Script you do something like this:

ReactorJSRun( "web" ; "fmLoginSuccess();" )

Where "web" is the Layout Object Name of the WebViewer and "fmLoginSuccess();" is the JavaScript function to call.

I also built in support for both CSS and JavaScript overrides to this BlackBox, so that tweaking styles and behaviors is possible without having to compile and deploy a new version of the Black Box.

I don't mention it in the video, but the design and themes you see are all from @sprawsm the brains behind Uni-Form.

Here is a little movie showing it in action.