Dynamic Delivery Zone Checking with FileMaker Pro 19

One of our favourite features of the FileMaker 19 Platform that was released earlier this year is the ability to interact with a FileMaker web viewer using the new JavaScript integration capabilities. This update allows FileMaker scripts to directly call JavaScript functions and pass multiple parameters, and also allows the JavaScript running in the web viewer to run a FileMaker script in the current file and pass in a script parameter.

I was looking forward to taking advantage of this in client projects over time and was recently able to use this feature to help a client solve a particularly challenging problem in a relatively short space of time.

Our client runs a food delivery service, delivering gourmet recipe mealkits to customers homes each week. With the COVID 19 restrictions in Australia they have seen a lot growth in the past 6 months and an increase in the number of weekly orders. They have a defined delivery zone setting out the boundaries of where they will deliver to which is changing over time, but they needed a way to determine whether a customer’s address was inside or outside their set delivery zone.

I’ve done a lot of work with the Google Maps JavaScript API over the years and wondered whether that could be of any assistance here. A few minutes of research led me to their Geometry library which includes a containsLocation() function that can determine whether a given point falls within a polygon. All that is required is the geocode of the address in question (latitude and longitude) and a polygon representing the area you wish to check against, which itself is a series of geocodes that define the boundaries.

To create the polygon representing the delivery zone boundaries I turned to Google Earth which has a tool that allows you to draw a line or a shape representing the area you wish to define. I created a region for parts of Sydney, Australia that would be my test delivery zone region using Google Earth which is represented by the yellow lines in this screenshot:

I was then able to export that area as a .kml file which contained the series of geocodes that made up the boundaries of my test delivery zone. I then converted that file into a .txt and imported the geocodes into a FileMaker table so I could then recreate the delivery zone polygon that was required by the Google Maps API.

I also used the Google Maps Geocoding API to convert customer addresses into a geocode which is also required to pass to the Google Maps API to determine if it is inside or outside the polygon. I was now ready to bring this all together to have a button on my FileMaker layout that allowed me to programatically check an address against the delivery zone and return a result indicating if it was inside or outside, as well as visually showing the location of the address on the map so you could visually where it was in relation to the boundaries.

Using the new Perform JavaScript in Web Viewer script step in FileMaker Pro 19 I was able to call a JavaScript function to check the customer’s address and have that in turn call a FileMaker script with the result as the parameter. When setting up your web viewer you will need to make sure you enable the new Allow JavaScript to perform FileMaker scripts option (this is disabled by default when adding a new web viewer to a layout):

To have your JavaScript return a result back to FileMaker by calling a FileMaker script and passing a parameter you will need to call this function:

FileMaker.PerformScript ( script, parameter );

In my example I am calling a FileMaker script named Update Zone Check with a parameter of zoneCheckResult which returns true if the customer address is inside the delivery zone, or false if it is outside:

FileMaker.PerformScript('Update Zone Check', zoneCheckResult);

Here’s a screenshot showing a successful result (you can see the address pin is inside the shaded delivery zone):

and here’s a screenshot showing a record where the address is outside the delivery zone:

In each case the Inside Delivery Zone field in the bottom left corner was updated dynamically by the FileMaker JavaScript interaction. We’ve put together a short video showing this in action which you can view below or directly on YouTube here.

N.B. the FileMaker Pro 19.1.2 Updater introduced a new version of the FileMaker.PerformScript() function that allows you to control how running scripts are handled when JavaScript calls a FileMaker script. A new function:

FileMaker.PerformScriptWithOption ( script, parameter, option )

now lets you specify 6 options that determine how a currently running FileMaker script is handled. The FileMaker.PerformScript() function is still supported and uses the default ‘Continue’ option. See the release notes for further details on the available options.