With everything that we’ve learned with our last post, Communicating with a Web Viewer in FileMaker, it makes sense to wrap up the functionality into a FileMaker module and JavaScript library.
FMAjax is a JavaScript library and accompanying FileMaker module which includes functions to facilitate communication with a web viewer without reloading the page. It helps you call FileMaker scripts from a web viewer app and return data to the Web Viewer. These solutions work across Mac, Windows, and iOS, on both hosted or local files. FileMaker 13.0v2 or later is required.
Features
- Web Viewer apps can be created like regular web applications:
- Files don’t need to be concatenated together.
- Files can be created and edited in an external text editor and imported into FileMaker.
- Web Viewer apps can be run and debugged in your browser of choice.
- FilerMaker data is supplied to the web app separately.
- Scripts can easily be called from a web viewer.
- Data can be sent to a web viewer from a FileMaker action.
- JavaScript functions in the Web Viewer can be called from FileMaker.
- A web viewer can request data from FileMaker and then handle the response via a callback function, similar to a true Ajax request.
- Data retrieval is fast. One example in the sample file is a 400,000 character book which is retrieved in 200 ms.
- Installation is as simple and modular as possible:
- Three tables and a few relationships.
- One necessary layout.
- Added tables don’t need to be related to your project tables.
- Added scripts shouldn’t need any configuration.
Why
For a refresher about the practices leading to this module, see my last post.
Web viewers open up the vast world of web development resources to the more tightly-controlled FileMaker platform. Find a web widget you’d like to implement? Add it in! Want to replace parts or the entire UI with HTML? Go for it! Want to use JavaScript to crunch some numbers because it’s 100x faster at a particular task? There’s nothing stopping you! For example, I recently added the popular jQuery plugin chosen to a project of mine, and it integrated rather seamlessly.
As web viewers become more than a portal to external websites, and instead become a way to use local web code, it gets trickier to keep everything organized and working properly. We’ve done the legwork of discovering as many pitfalls as possible, and this module is the result of that. If you have a very simple web app, you may not feel that you need much organization, but it may be wise to get organized with it now in case you’d like to expand in the future.
We’ve hosted FMAjax in a GitHub repository, so please download it there. If you have any issues, please add them to the Issues tracker there.
UPDATE: for those of you who attended my talk at Apple or DigFM or beezwax on Nov 12-13, you can download the demo file here. Login credentials are username: Admin, password: admin.
Hi Ryan,
I just found your post, downloaded and tried to use this fantastic solution for my database.
Since I’m not a real developer – I’m only experienced in FileMaker – I don’t know how I can call a function from my js/html.
In my database I have a webviewer using HTNL and JavaScript and I got it to work using the temporary folder used by FMAjax. My HTML code contains a few JavaScript function which I want to call with FileMaker buttons.
I checked your examples but I was not able to adapt them to my database. Do you have another example which will fit to my case?
Thanks for any help and thanks for providing FMAjax.
Best regards from Germany
Almute
Great article!