May 11, 2014 
Update 2017-09-02: A reader named Robert Richardson was having issues with blank QR pngs showing up. In the end he solved this himself: “The solution I’ve found is to hard code a 1 second pause to populate the container (when producing qr codes in a loop for many records). This seems to give each record enough time to create the qr code; just in case anyone runs into the same problem…”
A while back, I wrote a blog and demo using FileMaker Pro to generate QR Codes. The technique employed Google’s API to generate a QR Code and the Insert from URL command in FileMaker Pro 12 to get the code into a container field. A reader requested a technique that allowed users to generate QR Codes even when they were not connected to the Internet. Recently I came across a free open source standalone Javascript library by David Shim that generates QR Codes without the need for a connection.
Why QR Codes?
QR Bar Codes can hold more information than a regular bar code and my experience with scanning them using FileMaker Go 13’s built-in bar code scanning is that the speed and recognition accuracy is much better than with a regular bar code scan.
With some help from my brilliant programmer son Cory Alder, (Developer of CatPaint and numerous other iPhone apps) we were able to get the Javascript working (well mostly he did it) in FileMaker Pro 13, using a Web Viewer and the Base64Decode function. The challenge was to have the result returned as just the Base64 image, rather than the page loading with the image embedded in the html/javascript. There was no way to scrape the image text out until Cory re-wrote the code to redirect to an image page. If this sounds fuzzy, it is because I don’t understand much Javascript. After he made these changes, I still couldn’t get the image to display because I was using:
GetLayoutObjectAttribute ( “JavascriptQRCodeGenerator” ; “content”)
when instead what was required was:
GetLayoutObjectAttribute ( “JavascriptQRCodeGenerator” ; “source”)
Download FileMaker Pro 13 format Demo:
- Javascript QR Code Demo File (a zip file – Desktop)
- Javascript QR Code Demo File (.fmp12 file – iOS )
To copy this technique to your own solution, here is the to do list:
- Copy over the fields required: QR Code, Data, Size, index_html, qr_code_js
- Copy and paste the Web Viewer named ‘JavascriptQRCodeGenerator’ onto your layout
- Copy (or create) the Size value list over
- Setup your layout
- Paste the text from the Index_html and qr_code_js fields into your solution
- Copy the script called “Generate QR Codes”
- Copy and paste the ‘Create QR Code’ button
- Review script for errors (possibly field name differences)
- Test
- Fix problems
- Test again.
QR Code demo
The demo consists of a three fields for processing:
- Data
- Size – size of the QR Code
- QR Code container field.
In addition, there are two global fields to store the Javascript and HTML content that drives a Web Viewer.
- index_html
- qr_code_js
Finally, one script ‘Generate QR Code’, drives the calculation to generate the Web Viewer content and scrape the result back into the QR Code container field.
The Generate UUID button/script is simply there to generate some sample data and is not crucial to the demo.
What is going on here
The index_html and qr_code_js fields. The index_html field contains an html field with some placeholders that will be substituted in the script for the Data, Size and the qr_code. The qr_code_js is the raw Javascript from David Shim.
Required fields
Generate QR Code script
The script sets the named Web Viewer to the calculated HTML, replacing the data from the field and the size selected. The resulting Web Viewer is then scraped for the Base64 encoded QR image and set to the container field.
2014-05-11 Update: Paul Smith on the FileMaker Pro Tips Facebook Group page posted a different approach to this same Javascript code. His demo has the added benefit of working in FileMaker Pro 12, and could probably be re-written for FMP7 format. Instead of pushing the QR Code to a container field, he simply displays it in a Web Viewer. He keeps refining it and it consists of just two fields (data and URL calculation) and a Web Viewer. Very nice version, worth looking at as an optional approach. It is here: OfflineQR.fmp12
2015-07-24 Update: This approach seems to be problematic on Windows, presumably because of Internet Explorer handling Javascript differently. Alternate approaches include:
- Google API for Barcodes:
- Geist Interactive’s Barcode Creator
- Paul Smith’s OfflineQR.fmp12
Related Posts
Creating and Storing 2D Bar Codes in FileMaker
QR Codes in FileMaker 12 & 13 — No Plug-ins, No Custom Functions
Bar Code Scanning in FileMaker Pro 13
Building a Barcode System in FileMaker Pro
HomeBase Software 
Nice work, Douglas. And thanks to your son, Cory, for his assist. It’s great to see FileMaker developers stretching the envelope with web tools. It will only make the platform stronger.
Great work, what can’t you do in Filemaker !!
Any idea why i can’t use it on the iPad?
Hi Alistair,
I just tested it on my iPad with FileMaker Go 13 and it seems to work fine. Are you using FM Go 13? If not, it is available as a free upgrade from the App Store. If that doesn’t work, perhaps you can give me some more details on what you are seeing.
Hi Douglas,
I really like your solution to generate the QR code and all your contributions to Filemaker. Unfortunately when I get the example from your website it does not work, I get the QR code in the web viewer, but not in the container field, where I only get the symbol of an empty png file.This happens even with your original file. I use Filemaker 13 on Windows 7, maybe it does not work on Windows?
Hi Maria, it could be an issue with Internet Explorer. JavaScript behaves differently with each browser. FileMaker on Windows is dependent on IE. All I can suggest is that you make sure you have the latest version. I believe this works in Windows 8.
Hi Douglas. That’s it! Thank you for your answer.