By Brian Ouimette:

In this article, we will be looking at a demo of a check-in/check-out system based on geolocation that is specifically for FileMaker WebDirect clients.

HTML5’s GeoLocation API gives us a web-native way of doing this within the webviewer. However, in FileMaker 18 or earlier, there is no built-in way for us to get geolocation data out of the webviewer and back to FileMaker. (Stay tuned for a FileMaker 19 version of this solution.) For now, the constraints that gave rise to this solution are that (1) we have a FileMaker Server 18 hosted WebDirect solution and (2) we want to avoid plugins or other technologies that are not directly supported by

FileMaker Server.

To start, we have a FileMaker file that references a basic HTML page containing a single button that is conditionally formatted

based on the record state (never checked in, currently checked in, or checked out). We add a little JavaScript code to get coordinates using the HTML GeoLocation API and send them along with the FileMaker recordID to a PHP page, which then makes a REST API call to FileMaker Server via the Data API.

If being entirely standalone isn’t a requirement, you could use something other than PHP to serve up the HTML/JavaScript file. At Proof, we generally prefer AWS Lambdas APIs or Claris Connect to glue our workflows together. For an all-in-one standalone solutions, enabling PHP on FileMaker Server gives us an easy win.

If you want a serverless solution, you could skip the PHP/server-side matter altogether and just have your JavaScript function to make a call to some REST API that would do the heavy lifting of writing back to FileMaker Server.

The webviewer in the FileMaker file references the HTML page and has parameters that are passed in like the FileMaker recordID, as well as values that may have already been recorded in the geolocation fields.

The Files: A Quick Breakdown

  • geolocation.fmp12 FileMaker database to host on FileMaker Server. It contains two layouts: one is for WebDirect and the other is for the Data API. The WebDirect layout has a webviewer at the top with a the single button that is conditionally formatted based on the record state (never checked in, currently checked in, or checked out). The remainder of the layout consists of FileMaker fields. The Data API user is `dapiuser`. This user only has access to the Data API layout and to modify the four geolocation fields.
  • geo.html –This is an HTML file you will host on FileMaker Server. It is the web page used in the webviewer and allows the WebDirect client to get the geolocation data.
  • sendLatLng.php – This file receives several parameters: Latitude and Longitude as well as a FileMaker recordID used to update the record via the Data API. Depending on the button state in the HTML file, the parameter names will either be checkinLat and checkinLng or checkoutLat and checkoutLng. The PHP takes these parameters and makes a post back to FileMaker via the Data API and updates the record. The way this file is currently set up is to hold the base64encoded username and password for the Data API. This could be improved, but for the purpose of this demo, this is how we went about storing the credentials.

Access these files by downloading the demo here.

Set-Up

Open the PHP and HTML files. Replace anywhere where <<host>> is with the FQDN where the files are being hosted. In FileMaker in the webviewer replace <<host>> with the FQDN. In the PHP file, you will also need to update the base64 encoded credentials. If you use the dapiuser, the base64 would be `ZGFwaXVzZXI6ZGFwaXVzZXI=`. You will need to enable the Data API, which means you will also need to install an SSL certificate. Web Publishing and PHP will both also need to be enabled as well.

And there you have it! Feel free to give this solution a try and drop us a comment below to let us know what you think.