With the advent of the Web Viewer technology being added to FileMaker, developers started to employ these useful containers for all sorts of things. One of the obvious things is to add an animated GIF to a layout to give users an indication that something is happening when a long script is running. There is a technique that allows the GIF file to be stored in a Base64 text format in a FileMaker text field. The graphic can then function whether you are connected to the Internet or not.
This technique has been kicking around for a while but I haven’t seen anyone go through it step by step, including how to add new graphics.
Download the Demo File here.
I have built a small demo file to demonstrate how this works. There are a couple of dozen icons already in the set, but you can add more if you want. The steps to add a new graphic are:
1) Click on the Icon Source button to open a web page with some open source animated GIFs. These are from a web site called mentalized.net When you see something you like on this web page, or some other source, right click on the image and copy the Source Link to the file.
2) Back in FileMaker, click on the the ‘Convert Image to Base64’ button. This will open a web page called www.greywyvern.com. They have helpfully provided a service that converts an image to it’s Base64 text equivalent.
Open Source Activity Indicators
Find an icon that you think will be suitable to your solution.
Right Click on the Image to copy the Image Address
This screenshot is from Safari on a Mac, your web browser’s contextual menu may look a little different, but there should be an option to copy the image’s address.
Now click the ‘Convert Image to Base64’ button
Bottom Right Corner. This will launch the greywyvern.com web site in your browser.
Paste the URL that you copied in the previous step into the ‘Encode file from URL’ field.
Then click ‘Submit’
Base64 Encoded version of your selected GIF is now in the second field
Copy the text
Click into the field:
Mac: Command A (Select All) then Command C (Copy)
Windows: Control A (Select All), then Control C (Copy)
Back in FileMaker
1) Create a New record
2) then paste (Command or Control V) the Base64 text into the Base64 field. You can also enter a name for the indicator, and perhaps paste the source URL for future reference, in case you are looking for other indicator graphics.
3) Your indicator should immediately show up in the Web Viewer below the text field.
Adjusting the Image Size
By default, if you don’t enter anything in the GIFWidth and GIFHeight fields, the graphic will be it’s default size. If you want to tweak it smaller or larger, you can do this by entering numbers in these two fields.
One Script, One Web Viewer Paste into your Solution
It is great having all these possibilities for progress indicators, but ultimately, you probably will just use one or two of these graphics in your solution. What I explain next is a method of creating a single script and web viewer to paste into your solutions to make it easy to integrate.
Select your Chosen Graphic
Copy and Paste the Base64 field info into the Set Variable $Base64 script. If you want to resize the graphic, enter values into the $GifWidth and $GifHeight variables.
Save the script.
The Set Global Variable Script Step
Notice that the $Base64 variable is being concatenated into a longer URL to create a global variable to use in the web viewer.
Create your Progress Layout
Pick a layout to display the animated icon. Create a Web Viewer
Define the Web Viewer
Turn off all the options for interaction.
Enter the Web Address as “data:text/html:,”& $$Prog_Icon_for_Webviewer
Add the Script to your Loop
I have a demo loop that doesn’t do anything except delay things so you can view the animated icon on the layout.
Remember to call the script that sets the Global Variable that feeds the Web Viewer.
Pause to Refresh the Screen
You may need to add a Pause/Resume Script step to allow the screen to refresh. You could set this to refresh every Nth repetition.
Progress Indicator at work
You can’t see it animated in this screen shot, but just pretend it is pulsing along sideways, giving users the necessary reassurance that the program is working away and will eventually come back to their control.
Having made adjustments to the script called “Set the Progress Icon to a Global Variable”, you can now paste the script, along with the Web Viewer as defined into any solution and it should just work. Remember to call the script early on in any routines that will display the progress indicator, so that the Global field is set and the icon can display properly in the web viewer.
FileMaker Versions This Technique Will Work In
I tested this technique with FileMaker 9, 10 and 11. In theory it could work all the way back to FileMaker 8.5 when FileMaker Inc., introduced the Web Viewer, but I am having trouble remembering what version we got Global Variables in. FileMaker 8.5 crashes on my computer now, so I could not test it.