Kyo Logic eSignature Application – Using the Power of CLARIS FileMaker 19 to Enhance your Application

With the recent release of Claris’ FileMaker 19, developers around the world are reveling in all of its new capabilities. Today we will be taking a deeper dive into two new capabilities: WebDirect Card Windows and JavaScript in Web Viewers. We will show you how they can be utilized to greatly enhance your FileMaker database.

WebDirect Card Windows

            Since the release of FileMaker 16, Card Windows have taken the FileMaker world by storm. They have allowed databases in FileMaker Pro and FileMaker Go to layer a window on top of another window as shown below.

Starting with FileMaker 19, this functionality has now been brought to WebDirect!

JavaScript in Web Viewers

FileMaker has added a new function to Web Viewers called “Allow JavaScript to perform FileMaker scripts.” You can see below where to navigate to turn this on in the Web Viewer Setup.

What this allows you to do is enter the below JavaScript function into the JavaScript code in your Web Viewer. This will trigger a FileMaker script to be run as a result of an action taken within the Web Viewer.

[arve url=”https://test21.kyologic.com/wp-content/uploads/2020/05/Signature.mp4″ /]

In the eSignature Application tool we utilize the open source signature pad code provided here https://github.com/szimek/signature_pad  (Thank you Szymon Nowak!) as the base for the web viewer code.

We have set up each element of the code in its own field in the HTM_Html table and combine the individual elements into the HTML_Calc field, which is what the Web Viewer reads and displays.

The elements in our code, which have been added to our FileMaker functions, are JSFM1 and JSFM2.

JSFM1 Is the Function that will be called upon selecting Save and JSFM2 upon selecting Cancel from within the Web Viewer.

Here is a look at what the field JSFM1 contains:

As you can see here, when the Save button is clicked the function will run and, assuming that it is not empty, will first save the image as base 64 encoded text and then run the script SaveSignature in FileMaker.

SaveSignature simply pulls in the dataURL as the parameter, decodes and formats it to be a png. Than sets it to the container field and closes the card window. It’s as easy as that. No more unnecessary data api work arounds!

It is important to note that with FileMaker 19, it is no longer necessary to base64 encode your web viewer code on WebDirect. In order for the FileMaker.PerformScript function to work from within a web viewer in WebDirect, the webviewer code cannot be base64 encoded and must start with data:text/html,