Have you heard of Carafe? Our free, open-source tool makes it easy to implement JavaScript in your FileMaker solution. Learn more.
FileMaker 16 introduces a new security setting that could affect solutions using JavaScript. This extended privilege is called “fmpurlscript” and allows URLs to perform FileMaker Scripts. The “fmpurl” is used to reference FileMaker applications, much like “http” is for referencing web applications. You can use an “fmpurl” with JavaScript to get information from a web script to your FileMaker application.
We have covered FileMaker and JavaScript before. Here are just a few previous blog posts and sample files:
- Getting Started with JavaScript and FileMaker
- Introducing the Web Viewer Integrations Library
- Data Structure of the Web Viewer Integrations Library
- Getting to Know the Web Viewer Integrations Library
- Playing with a Web Viewer Integration
- Implementing a Web Viewer Integration
DevCon 2017 Session
Jeremy Brown has an upcoming session at DevCon this year as well, where he will go into more depth on this topic.
Web Viewer Integrations Presentation Description
The web viewer object is an extremely versatile object that allows a developer to integrate deeper functionality into a custom app using the languages of the web, HTML/CSS and JavaScript.
In this session, you’ll explore a standard way to integrate common web libraries, including setting up an integration in FileMaker, manipulating it, and gathering data using some of the new functions of FileMaker 16. Discover best practices that are used to make this as easy as possible to set up deeper functionality.
New FileMaker 16 Functions
FileMaker 16 also comes with helpful functionality for getting data back and forth from a JavaScript-based solution. These include functions for JSON (JavaScript Object Notation), which you can now handle natively in FileMaker. For more on these, please see the following blog posts from my team members:
Also, Anders Monsen has a DevCon 2017 session on JSON that may be of interest as well.
Leveraging JSON in Your Custom Apps
JSON is a data language that’s becoming increasingly popular in the tech world and you can integrate JSON with FileMaker for your data interchanging needs.
In this session, you’ll learn the various ways in which to leverage JSON in your custom apps. Take real world examples and investigate integration capabilities by contrasting FileMaker 15 (without plugins and 3rd party tools) and FileMaker 16 (using 16’s new JSON functions), including approaches for dealing with improperly formatted JSON. Recommended Background.
Updated JavaScript Samples for FileMaker 16
This new release has been a great opportunity to update a few examples I have written that use JavaScript. These are also freely available.
These particular examples demonstrate techniques that do not output a visible result in a Web Viewer. Rather, they utilize JavaScript functionality to extend FileMaker and return data to FileMaker in a useful way.
Each of these has been updated for FileMaker 16.
FM-js_Barcode
A question posed in the FileMaker Community asked if there was a way to save an image generated from JavaScript and save it in a container field. This solution uses code from the Github repository of Johan Lindell, linked below.
Since storing as an image in a container field allows for clean printing in all platforms that FileMaker supports, this is a preferred way to generate and store barcodes. You don’t need to install anything on client machines, like 3rd party plugins or maintained fonts.
- Github Project used here.
Some barcode types may have requirements on the values they can represent. For example, your EAN type must be a 13 digit number. Check the documentation for the barcode type you use before implementing this in your solution.
FileMaker 16 also added better support for Windows versions where long URLs are not supported and may fail. Note that this uses the user clipboard to transfer data from the web viewer to a field.
FM-jsSON
This file uses JavaScript to parse JSON. Since JSON was built specifically to be used by JavaScript, it makes sense to utilize the JavaScript engine via the Web Viewer in Filemaker Pro and FileMaker Go.
You can easily adapt this to your solutions as needed. There are minimal fields involved, and a couple scripts that drive the solution.
To run the demo:
- Modify the object you want to reference in the field provided. Note that arrays start at zero (0).
- Click the “Get Object” button.
- View the results.
The JavaScript used is in the Resources table, and you can modify it for your use from there.
FM-js_ExcelSheets
This file uses JavaScript to create an XLSX file. You can easily adapt it to your solutions as needed. There are minimal fields involved, and a couple scripts that drive the solution.
To run the demo:
- Check the boxes to select the sheets to include in your Worksheet.
- Click the “Save as Excel” button.
- View the results. If “Automatically Open” was checked, a copy is exported to the desktop and launched.
The JavaScript used is in the Resources table; you can modify it for your use from there.
Use the JavaScript Library from Github here.
Please view the licensing information for each piece.
FM-js_ValidateXML
A question posed in the FileMaker Community asked if there was a way to validate XML. Interestingly, there are solutions for this in JavaScript that we can use to pass a result back to a FileMaker script.
By adjusting some JavaScript related to finding unclosed tags in XML, you can have it use a FMP URL to call a script in the parent FileMaker file and pass the result back as a script parameter.
See a sample JavaScript from Stack Overflow here.
The source URL referenced on the Stack Overflow page no longer works; use the XML Validator instead.
Carafe Tutorials
Our free, open-source tool, Carafe, allows you to easily download, configure, and deploy a bundled Javascript library into FileMaker.
Hi Mike,
The Javascript xlsx demo is awesome, thank you. Did you consider setting the field names into the column headers rather than the first row or formatting the first row with a background colour for example?
Javascript is not my area, so it would be helpful if you could point me in the right direction…
Thanks
Hi Paul,
Glad you find it useful. I am not sure if you can do what you are asking, however, you can check the documentation of the lib that file uses, it is here: https://github.com/SheetJS/js-xlsx
Mike
Mike,
I did look at the link before I posted and was rather put off by the number of files in the repository – I tried searching, but without much success. I thought it worth asking incase you could say look in file xxx in the repository 🙂
Thanks anyway – it’s still a great technique…
Right, you don’t need to download those files, but if you scroll down the page on that github repo, the documentation from the Readme is there. Looks like maybe the headers are generated from the keys in the JSON you pass it, but I have not tested that.
Mike
Hello thank you for this information,
can you please tell me more about Json?
You can read more about JSON here: https://www.soliantconsulting.com/blog/2017/05/creating-json-filemaker-16
Have you created a sample solution to import Excel spreadsheets into FileMaker Go?
With javascript? No, I have not.
Hi Mike,
I used your template successfully; thank you very much!
In the excel file produced I would like to format some cells as USD currency, highlight in yellow some empty cells, and format the text of a specific column in red font. Is there a way to do that?
The free version of sheetjs may not include the ability to format cells like you want to do. You might look at the professional version or another fork of the javascript that might offer this functionality, like https://github.com/protobi/js-xlsx.
Hope that helps.
FM-js_ExcelSheets doesn’t seem to like Filemaker 19. Any chance you could point me in the correct direction to re-establish compatibility please?
Many thanks in advance,
Stephen
It actually still worked in Mac, but recent versions of FileMaker for Windows broke likely due to switch to Edge for rendering web viewers and no longer being able to set the clipboard. Fortunately this does work when using the javascript support added to FM to be able to call javascript functions from FM and for javascript to call FM script and pass parameters. I have updated the sample file on github and will work cross platform now.
Cannot thank you enough, for both your knowledge and speed of reply!
I’m off to convert my existing setup using your new version.
Sincere thanks once again,
S.
where I can find the sample file that works with windows ?
Many Thanks from Mexico!
https://github.com/SoliantMike/FM-js_ExcelSheets
I’m finding this update a little glitchy – I can run it a few times and nothing happens and the next time it’ll generate the spreadsheet? Filemaker 19 (on Windows) also hangs for about 20 seconds once a spreadsheet is successfully generated.
Anyone else experiencing similar behaviour?
S.
Apologies for pestering yet again, but I am struggling to add more than the three worksheets used in the example – in fact, it fails if I don’t name all my elements company, address, contacts!
I had this working with 14 sheets with the old version and it was just a case of tweaking the ws and ws_name in the Save_XLSX script and adding these worksheets into the Resources::js field.
The js doesn’t look much different, but is there some limitation on worksheet numbers and naming at all?
Sincere thanks in advance,
S.
Not that I am aware of, but will have to test.
I really appreciate you sharing this and updating it for the changes in FMP19 / windows. I am testing a database that has been using it fine in client, but I now need it to also work in webdirect and it doesn’t seem to call the script from the web viewer there. Everything I have tried doesn’t seem to make a difference, it is supposedly supported, but just doesn’t work. I have tried tweaking filename variables and pause duration. I checked and while “data:text\html,” isn’t included in the JS field it does seem to add it in the script calculations. I don’t really know javascript, so any tips would be appreciate it. I’m currently experimenting with your sample file which has the same issue with web direct.
Hi Christine,
I tested this file again and it does work in Webd. Make sure on your web viewers that you check the box in setup to “Allow javascript to perform FileMaker scripts”.
Hi Mike,
Thank you for confirming it works for you.
Hmm. That is checked on your sample file and it works fine in client, but not web direct. I have tried on both safari and chrome on a Mac. Nothing populates to the container field when run from a web browser. It’s hosted on windows, filemaker server 20.3.2.205.
Hi Mike,
I’m wondering if DNS name might be affecting this? the IP shows a SSL error, but the hostname and another DNS name that we have forwarded to it both work with the SSL. The Webdirect URL uses the forwarded DNS name. I’ve been scouring Claris Community and that’s the only thing I can find…. I’ve increased the pause step up to 2 seconds and that didn’t seem to make a difference.
That could be. You might try to use developer tools in your web browser to look at the javascript console to see if there are errors there, in webdirect. Webd can have issues if SSL is not set up correctly.
well, apparently it wasn’t working for me because the web viewer was not in the visible area. I moved it onto the visible part of the layout and it started working just fine. Now to compare and figure out why it’s not working in our solution.