Container Field Images in the Web Viewer
Update
I have released a new version of the sample file which demonstrates how to use this technique to embed video files as well.
Introduction
I wanted to create a help system for my clients using FileMaker’s web viewer. I wanted to have images embedded in the help so that they could be displayed within the context of the help. Not too much to ask right? I also wanted to store these images in a repeating container field along with the text and then reference them directly in the web viewer without having to export them or store them on a shared drive or web server somewhere.
This is where Base64 encoding comes in. Why should you care about base64 encoding? Well, it allows you to convert an image into plain text which you can then embed directly into your html code and display the result in a Web Viewer!
If you are on the cutting edge, you already own a copy of FileMaker 13-16 which has Base64 encode and decode functions built right in. However, if you cannot use FileMaker 13-16 yet, there is still hope for you by using the fabulous free BaseElements plugin from Goya.
In the examples to follow, I will be using the BaseElements plugin version of the Base64 encode function.
The following example, if placed into the calculation area of a web viewer, will display an image stored in a container field.
“data:text/html,” &
“<HTML><BODY>” &
“<img src=’data:image/gif;base64,” &
BE_Base64_Encode ( MyTable::MyContainerImage )
& “‘/>”
& “</BODY></HTML>”
Notice the use of the “data:text/html,” string. This instructs the web viewer to use any text which follows as your html web page. This is very cool for those of you not yet familiar with this concept. This means you can construct a dynamic web page on the fly which includes any filemaker field data you want to add.
The next thing we want to do is to combine text data with images so that everything will show up together like is does in a regular web page. To make this work you will need a text field to store your help text in addition to the container field(s) where you store you image(s). This text data must be formatted as a calculation because we will be using the evaluate() function to interpret it. The following is an example of what you could input into your text field:
“This is my help text.<br>
This is my image:” &
“<img src=’data:image/gif;base64,” &
BE_Base64_Encode ( IGI_Webviewer_ContainerImage::MyImage )
& “‘/>”
& “<br>This help is now concluded!”
It is critical that you place all non calculation text within quotes “Like This”. If you do not, the evaluate() function cannot determine what is text and what is a calculation that requires evaluation. You can also see that I use <br> in the text above. HTML does not know about any carriage returns I may have typed into my text field, so I have to use <br> to tell HTML when to perform a line break. Any additional formatting such as bold, italic, underlines, tables, etc will require you to know more HTML, but it’s really pretty easy stuff. One more major thing of importance is the use of the single quote mark aka the apostrophe. You will see that it is used at the beginning of the <img src=' tag. It also has a closing single quote at the end: “‘/>”. It is difficult to see but there is a quote " followed by an apostrophe '. Use of the apostrophe allows you to still use quotes within your html code without the need for an escape character, or having to resort to using FileMaker's Quote() function.
This next example when placed into the calculation of a web viewer will display your help text with the image embedded.
“data:text/html,” &
“<HTML><BODY>” &
Evaluate(MyTable::MyHelpText)
& “</BODY></HTML>”
It is important to note that you really need to lock down the security on anything that uses the evaluate function. The reason for this is because evaluate can be used to replace the contents of your global variables you might be using in your solutions.
Sample File: WebviewerB64Img.zip