Google Autofill Using Interactive Text in a WebViewer

I’ve always been interested in finding ways to bring features from other development platforms into the Filemaker environment and make it more flexible and attractive to our end users.

The emergence of the WebViewer and the evolution of JavaScript as a complementary language inside the Filemaker has allowed us to develop new and more complex applications. On the other hand, Google has been providing us with valuable APIs, which considerably increase our ability to integrate useful processes to our applications. One of those is Places API, which features Google Autofill Address. 

Our solution is based on the interesting technique proposed by Brian Ouimette in 2017 (https://scarpettagroup.com/google-auto-complete-in-filemaker-16/). Instead of using a portal floating in front of the address fields, built on top of a relationship with a specially designed table (which is a bit of a pain to work with), we decided to reduce the complexity by avoiding new tables and portals.

With a Webviewer positioned in the layout just below the street address field (strategically hidden), we can query Places API while filling in our field and present the results as a dropdown text inside the WebViewer. When the user clicks on the address they want, it copies over the data. 

Our solution comes down to four simple steps: 

  • copying and pasting the webviewer with its own configuration, 
  • adding a trigger to the street address field, 
  • naming its object “field.street”, and 
  • copying and pasting 3 very short scripts

How do we do it?

1) Position a WebViewer just below the street address field, wide enough to contain almost a full address in a single line and tall enough to contain at least 5 returned addresses. To strategically control the WebViewer’s visibility we make use of the hidden condition $$WVHide ≠ 1, where $$WVHide is a Filemaker global variable.

For the HTML to be rendered inside the webviewer we have to apply the global variable: $$address.viewer. The HTML will be recalculated as a text expression with each query made to the Google API and shall include all the elements to render the dropdown text containing the addresses. Next, we are going to make use of the more stable FileMaker.PerformScriptWithOption java function.This function allows interaction between the html inside WebViewer and our Filemaker scripts.

2) The street address – in addition to its object name being set to “field.street” – has an object modified trigger, which runs the script “Trigger | Address Auto-Complete” with its script parameter being passed in json format.

3) The main function of the script “Trigger | Address Auto-Complete” is to fill the global variable $$address.viewer. The result is formatted as a JSON string, which then can be parsed as html format, with each address line becoming a html link. Those links, as mentioned before, run a Filemaker script called “Set_Fields”.

4) “Set_Fields” script parses the HTML line containing address data into filemaker fields contents: street address, city, county, state and zip code.

I encourage you to download this file for yourself and learn a new skill from us to you! Want to learn even more about what you can accomplish with Filemaker? Look at our other blogs here on the Scarpetta Group webpage!