Here at Portage Bay, we’re using a product called FM BetterForms. FM BetterForms is a third-party product that allows us to put a web-based user interface (UI) on any given FileMaker-based system. As a long-time FileMaker developer, I’m always on the lookout for products that will make clients happier. Usually that involves saving time (thereby saving money) or increasing the capabilities of FileMaker in a dramatically useful way. My first impression of FM BetterForms is that it is firmly in the second category, with a potential to reach out to the first eventually.

FM BetterForms is not just a web front end for your FileMaker Pro solutions. It’s very much the front end that FileMaker has been needing for some time. What I mean is that while the rest of the world moved on to HTML/CSS and JavaScript for their UIs, FileMaker did not. In fact, it’s only in the upcoming release of FileMaker Pro 19 that JavaScript is being incorporated into the UI. FM BetterForms has taken it upon itself to go ahead and modernize the UI for the web.

“Wait,” you might say, “Why do we need a web front end? Don’t we have WebDirect and PHP?” Absolutely, and those are very simple use cases to define. WebDirect is great when the number of users and their access patterns are known. When a situation is ideal for WebDirect, the cost for developing with WebDirect will still be lower than using any other technologies. PHP is one of those skills that FileMaker developers never picked up en masse, so choosing that direction typically necessitates the hiring of a PHP developer. FM BetterForms seems to be the web front end for the rest of us.

The product’s maker, Charles Delfs, has done a masterful job making sure that the product is equal parts easy to use, versatile, well-supported, and continually improved. I asked him how he accomplishes all that every day and the response was simple and with a smile: “No sleep.” True or not, it’s very believable from what I’ve seen.

FM BetterForms is scalable to thousands of users. It has responsive layouts (pages) built in. With it, you can make near-perfect representations of your FileMaker layouts online. And you have a code snippet library that makes it fairly simple to add the basics: input fields, date selectors, signature blocks, etc.

The real power comes in the form of Vue.js (JavaScript). With JavaScript involved, you get to make interesting things happen that you can’t do in FileMaker – like a photo gallery for instance.

I know, I know…another learning curve, right? Let’s get the semi-bad news out of the way so we can get back to the good news. FM BetterForms is a mix of JSON, JavaScript, and HTML/CSS. Any one of these tools can be kryptonite for a given subset of FileMaker developers. Put all of those together, and you can make most FileMaker developers roll their eyes, and maybe shudder a little. But if there was ever a time to not look away, this is it.

Let’s start with JSON. Honestly, you should have already taken a dive into the JSON pool at this point. If you can understand that this:

{“CompanyName”: “Portage Bay Solutions, Inc.”}

…means this:

“The value in the CompanyName field is Portage Bay Solutions, Inc.”

…then you can understand JSON and use FM BetterForms right out of the box.

Really.

FM BetterForms uses JSON as its schema. Here’s a sample chunk:

{	"inputType": "text",
            "label": "First Name",
            "model": "FirstName",
            "placeholder": "",
            "required": true,
            "styleClasses": "col-md-2",
            "type": “input"
}

This represents an input field on a page. In FileMaker speak, you would say that this is a field on a layout. The field’s name in FileMaker (model) is “FirstName”. The field label that the user sees is “First Name”. There’s no placeholder text. It’s a required field, and the field size is two columns wide ( “col-md-2”). And its purpose is to allow data input. Everything you need to know about that field is conveniently in one place.

See? That’s not so bad.  It’s really quite nice. If you haven’t started into JSON yet, FM BetterForms could very well be the killer app that gives you the reason you’ve been waiting for.

As for the other tools: HTML/CSS is used where you’re wanting to get things looking exactly right. JavaScript is used where you want things to act exactly right.

Now, back to the good news: you don’t have to be a JavaScript master. Charles says that what’s needed is a familiarity with the nomenclature and syntax. In other words, if you know the basic structure, you’ll be able to find what you need in the libraries, and put that code in the right place. To that end, a simple JavaScript basics course online will get you up to speed in a few hours.

And let’s be honest: we really need to know JavaScript in the coming years. Working with FM BetterForms gives a project-oriented and toolkit-expanding excuse for learning it. What’s not to love?

The same goes for the HTML/CSS side. If you know the basics you’ll be able to get done what you need to do in your first project. For my first experience, all I used the HTML for was placing paragraphs of text on the layout:

{	"inputType": "text",
            "label": "First Name",
            "model": "FirstName",
            "placeholder": "",
            "required": true,
            "styleClasses": "col-md-2",
            "type": “input"
}

Now, for the really good news: Charles has posted some 30 hours of live coding sessions and how-to videos to get you started. Examples include a “Getting Started” group, a “Techniques” group, and a six-part series on building a delivery app. Most likely, the answers you seek when starting out are in there somewhere.

In addition, Charles has an online FM BetterForms reference. But truth be told, the real support magic happens in Slack and in one-on-one training with Charles. The Slack Q&A is constant and inspiring. And Charles uses an online scheduling system to schedule his meetings, so if you need help soon, you can get it soon.

Pricing for FM BetterForms starts at $49/month, billed annually. Charles says that this starting point is good for most developer needs. Since blog posts like this tend to sit on the web for awhile, be sure to check https://www.fmbetterforms.com/ for the most current pricing and features.

In my opinion, the combination of web-accessibility and an easy-to-implement JavaScript-powered UI is the web front end to FileMaker that many of us have been waiting for. It’s still a young product, but the potential is very high. To investigate for yourself, head over to https://fmbetterforms.com/. Or, to see the training videos, check out https://fmbetterforms.screencasthost.com/.

If you’re looking for someone to integrate a web application into your FileMaker solution, we’d be happy to work with you on a solution based on FM BetterForms or on a fully customized JavaScript / FM Data API web application. Visit https://www.portagebay.com/about-index#contact-us to get started.