I love JavaScript, and there are two new features in Claris FileMaker Pro 19 that have gotten me really excited. This last week, I finally had a chance to play with these features and discovered that Claris has quite outdone themselves in how they have allowed FileMaker developers to harness the inherent power of JavaScript.
FileMaker Script Step: Perform JavaScript in Web Viewer
Scripting with JavaScript in Web Viewers
Perform JavaScript in Web Viewer lets you call functions in JavaScript code that are loaded by a web viewer. This means you can leverage and use all of the wonderful JavaScript libraries, UIs, calculations, graphics and more without leaving FileMaker. You do this by calling the functions directly and you can even pass variables.
Scripting with JavaScript in Web Viewers allows you to perform an action within a web viewer, like calling FileMaker scripts and passing parameters, and you can do all of this without needing to authenticate or use other awkward workflows. As of version 19.1.2 you can now select options for handling the currently running script when they run, .i.e., Halt, Exit, Resume, Pause, Suspend and Resume.
If you are familiar with JavaScript, you can directly control a web viewer’s webpage from FileMaker and, in the reverse, can control FileMaker from a web viewer’s webpage. They can now work together to accomplish great things.
An example of this would be a custom menu system in the web viewer. As there are so many more options for graphics and animation using JavaScript, you can now leverage all that JavaScript has to offer and present a custom user interface that is fast and interactive. You can control the look and feel by passing variables directly to the functions in the web viewer that control those interface elements. When buttons are clicked in the web viewer’s webpage, the JavaScript can now call scripts in FileMaker, passing variables back and completing the full circle.
It was possible to do part of this before with an fmurlscript; however, there were several issues that could arise over time such as not having permissions set correctly, referencing the wrong type of URL, and not referencing the correct version in the URL. You also didn’t have any control over script execution order. Now that you can call FileMaker scripts from JavaScript functions in the web viewer, several of those issues seem to be things of the past. Keep in mind, this script step works only if the web viewer is visible, and if the webpage has the same origin as the FileMaker webpage, as mentioned in the notes section on the Claris help page: Scripting with JavaScript in Web Viewers. (A webpage’s origin is its URL scheme, host name, and port.)
While a new way to do a navigation menu is great, my favorite use is leveraging JavaScript libraries like pivotable.js, datatables, and plotly.js.
An example of this use stemmed from an issue we experienced where FileMaker was running really slow at parsing large lists, JSON objects, and arrays. It can be very slow to display and scroll through a large list in FileMaker, not to mention sorting, searching, and selecting the data from the list. This is something JavaScript, JSON, and datatables are very efficient at doing.
For this example we are using a web viewer coupled with some light HTML and JavaScript. We generate a datatable in our web viewer which allows for searching, sorting, and selecting a row. When the user selects a row, variables are passed to a FileMaker script that displays the selected info in a FileMaker dialog box. That same script could be used to go to a record or for a myriad of other uses.
The one key technique that I like to employ, which makes using even extremely large JSON objects fast, is to store the HTML and JSON in FileMaker fields and reference them in the web viewer directly. This means FileMaker doesn’t need to write them to a variable and so runs much faster.
I use three fields for this scenario and concatenate them in the web viewer. This is an example of the setup used to define the web viewer.
I then put the first part of the HTML in html1, the JSON objects array in the json field, and the remaining HTML in html2. When they are concatenated by the web viewer they then read as a complete page.
When concatenated the complete code look like this:
By concatenating, we are able to load the JSON from a field into the web viewer and then leverage JavaScript to retrieve the specific JSON objects we want. We can even have a JavaScript function making the decisions as it parses the JSON and then tells FileMaker what to do with the parsed data it iterates over. This can be useful when dealing with large JSON data sets.
There is no reason to stop there, though. You can also use functions in JavaScript to parse large JSON objects and retrieve just the information you want, assigning it back to scripts to do as you wish. Parsing JSON with JavaScript in the web viewer can be a game changer in terms of performance. Let FileMaker do what it does well, and take advantage of what JavaScript in the web viewer can do when needed!
Portage Bay Solutions has 30 years of experience working with all manner of scenarios within a broad array of Claris FileMaker and 4D solutions. If we can assist in answering any questions, help you through hurdles in your programming, or even create a custom solution for your specific needs, please contact us using the form below. Thank you!
Your email address will not be published. Required fields are marked *
Comment *
Name
Email
Website
Save my name, email, and website in this browser for the next time I comment.
Post Comment
