Perform JavaScript in Web Viewer in Claris FileMaker 19
Overview: FileMaker “Perform JavaScript in Web Viewer”
One of the most exciting new features that Claris’ FileMaker Pro 19 has introduced is the “Perform JavaScript in Web Viewer” script step. It has expanded the ability for Claris FileMaker to transcend from its environment to other programming language environments.
In the past, there were a few workarounds to integrate Claris FileMaker with JavaScript. For example, using a plugin or running a Web Viewer with embedded JavaScript code that calls on a FMP URL to return the results to the current solution. Now with this new script step, we are able to call upon a JavaScript function embedded in a Web Viewer from a FileMaker script. The FileMaker “perform JavaScript in Web Viewer” feature opens up new doors for functionality in business apps.
Not only are you able to call the JavaScript function via FileMaker scripts, you are also able to call FileMaker scripts in the JavaScript function using the new “FileMaker.PerformScript” function. This will allow you to call upon FileMaker scripts to possibly return calculation results or actions that you would like to perform.
Setup
Setup is simple. You will need to perform the following:
- Move a Web Viewer onto the layout.
- Assign a name to the Web Viewer.
- Embed the JavaScript functions as a calculation result.
That’s it! You don’t have to worry about configuring security options or enabling permissions to allow the “Perform JavaScript in Web Viewer” script step to run. You’ve set up FileMaker and JavaScript to work together.
If you would like to use the “FileMaker.PerformScript” function to call FileMaker scripts in the JavaScript code, you will need to enable the “Allow JavaScript to perform FileMaker scripts” permission in the Web Viewer Setup dialog.
Other than that, you’re all set!
Demonstration
Let’s take a look at how we can use this script step.
The screenshot above displays a JavaScript function called “filemakerTest” that performs the following:
- Accepts three parameters.
- Concatenates the three parameters to one text string.
- Modifies the H1 HTML text with the concatenated string.
Now let’s look at the FileMaker script that will be calling this JavaScript function.
It’s very simple. You only need to reference the Web Viewer you’ll be using by its object name, set the name of the JavaScript function you plan to call and pass in the appropriate parameters that you wish to use in the JavaScript function.
Let’s see this script in action.
You can see that after the FileMaker script ran, calling the JavaScript function, it modified the HTML text in the Web Viewer with the concatenated parameter string. We confirmed that the JavaScript function actually ran!
Now we are going to add in the new “FileMaker.PerformScript” function to our JavaScript function. It will call a script in Claris FileMaker that passes the parameter text string as a FileMaker script parameter and it will display a dialog window with the text string.
You can see that once the script is executed, the script that was referenced in the Perform Script function is then called and the parameter is passed to the script as a script parameter.
Be careful when using the “FileMaker.PerformScript” function. It runs asynchronously, meaning that the FileMaker script will not wait for the JavaScript function to finish. JavaScript will continue to perform after calling a FileMaker Script and will not wait until the FileMaker script has been completed. You will need to take precautions with scripts entering a different context. The PerformScript function will run the FileMaker script on the context the window is currently on at the time. This is why you must be careful with the FileMaker “Perform JavaScript in Web Viewer” function.
Pros
Performance
One of the largest benefits that this script step will provide is increased performance for calculations via FileMaker scripts.
For example, the FileMaker script that you see above appends 100,000 numbers to a FileMaker List. These numbers are generated using the Random and Ceiling FileMaker functions. The numbers are then counted using the ValueCount function and displayed using a custom dialog along with how long it took to complete the operation.
When running the script, you can see it took me around 11 seconds for it to be completed.
Now let’s try to do the same thing using JavaScript!
As you see above, the JavaScript function is looping 100,000 times and appending a number that it generates using the Random() and Ceiling() JavaScript functions. From there, it returns it back to Claris FileMaker using the PerformScript function. It then counts the list and displays the count plus the completion time in a custom dialog as it did previously.
Let’s run it.
It was instantaneous! It only took less than a second to complete.
Even when increasing the iteration to 1,000,000, JavaScript was lightning fast where Claris FileMaker had to wait a few minutes to finish the script. It is exciting to see that calculations that take a minute or two to complete via Claris FileMaker scripting, may only take a few seconds with JavaScript.
Expands Claris FileMaker Capabilities
JavaScript introduces function calls that Claris FileMaker Pro doesn’t provide.
For example, Claris FileMaker doesn’t have a calculation function to reverse a string of text. There are ways to get around that by creating a custom function or using a plugin. With JavaScript, it already provides some function calls that make this task very simple.
JavaScript also provides function calls regarding regular expressions. Regular expressions allow us to find or replace matching character combinations in text. These functions will expand similar situations as we apply the PatternCount and Substitute functions today. It also allows us to integrate with other JavaScript libraries and API technologies.
Drag and Drop
Since all the JavaScript code is embedded in the Web Viewer, it makes it very simple to use the same JavaScript functions in other Claris FileMaker solutions. Just copy and paste the Web Viewer to the target solution and it will have access to those JavaScript functions. This allows for optimal reusability similar to the behavior with FileMaker scripts. The downside with FileMaker scripts is that they may be context-dependent, requiring tables and layouts to be brought over to execute the scripts properly. This should never be the case with JavaScript.
Cons
Error Trapping
If you are familiar with FileMaker scripting, you probably know that error trapping is a very important tool used to troubleshoot scripting errors. By using Claris FileMaker’s script debugger, we can step through a script to find where an error might have occurred. Once the scripting error is found, we can take the necessary steps to trap the error and avert the user from running the remaining script steps that are dependent on a non-error situation.
Unfortunately, the new “Perform JavaScript in Web Viewer” script step doesn’t provide us error trapping methods the way Claris FileMaker provides. If the JavaScript code that was embedded in the Web Viewer had an error, Claris FileMaker would throw a silent error when the “Perform JavaScript in Web Viewer” script step is run.
As you can see above, once the script step was run, we received a FileMaker error code of 5. This means that there was an invalid call to the JavaScript function. This alerts us that the JavaScript code is written incorrectly or that there might be a mistake in the Web Viewer calculation text. Claris FileMaker doesn’t provide us a method of understanding what part of the Web Viewer calculation is incorrect. This makes it difficult to debug what the error could be.
Zero Visibility
When using the FileMaker script debugger, we are able to view the context of where the script step is running, variables that are set in the script, calculations that are performed, etc. We have total visibility on the executed workflow.
When executing the JavaScript function, we do not have this same visibility. We only know if the JavaScript function had been executed (ie. if there was no error thrown by the “Perform JavaScript in Web Viewer” script step) and if any additional FileMaker scripts were called using the “FileMaker.PerformScript” function.
We aren’t able to see the JavaScript call stack or the variable values that are assigned in the code. This makes it very troublesome when determining the source of where in the code an error occurred. Consider using a JavaScript debugger to understand the underlying problems with the JavaScript code.
Conclusion
It’s exciting to see what the “Perform JavaScript in Web Viewer” script step will allow us to do. Not only is the script step flexible in its ability to be used but requires very little setup. Once the JavaScript code is written and is tested to perform as intended, just drop it into a Web Viewer and run the script step. The possibilities of integration with other technologies are endless with this new feature. Give this new script step a try and let us know what you think about it below!
About Skeleton Key
Skeleton Key develops apps on the Claris FileMaker platform making them easy-to-integrate, easy-to-use, and quick to build and deploy. Our team of experts takes a comprehensive consulting approach to focus on learning how your organization operates. With deeper insights into the way your team works, we’re able to create an ideal solution built around your operations while forming a partnership founded on trust and transparency. We hope you found this content useful and we would love to hear from you if we can be of any further assistance.
