FileMaker Web Viewer and Data URL’s
Whilst working on our new CRM (Customer Relationship Management) solution – Data Manager – this week we made an interesting discovery with the way the Web Viewer works. We wanted to have a way to preview an html email that was being composed in Data Manager so the user could see how it will look to the recipient, just as it does in Outlook etc when composing a new email. We also didn’t want to have to keep exporting files and then opening the exported file as that creates unnecessary clutter for the developer and the customer (though with FM Pro 9 you can use the new Get(TemporaryPath) function to dump files into the user’s temp folder. We investigated using a Data URL with a Web Viewer as this would provide a “live” view of the content. This works well for plain text type emails with no inline images as you can simply reference the fields using something like:
“data:text/html,” &
Substitute ( DM_Email::email_text ; “¶”; “<br>”)
This replaces any FileMaker carriage returns with the HTML equivalent.
However if you’re using email stationery like you can in Microsoft Outlook you might be referencing one or more inline images (gif, jpeg, etc) which are stored in a folder on the hard drive, server etc. This makes things a bit more complicated. Fortunately we have a table in Data Manager that stores all the inline images for each user which stores the path, file name and a copy of the image in a container field as well. Whilst scratching our heads trying to work out how we can do a substitute calculation to change any image references which might be:
<img src=”banner.gif” mce_src=”banner.gif”
<img border=”0″ src=”clickhere_btn.jpg” mce_src=”clickhere_btn.jpg”
we made an accidental discovery. If you export the contents of the container fields to the user’s temp folder using the Get(TemporaryPath) function the Web Viewer will somehow “discover” the images and show them when displaying the preview of the html email. This made things a lot easier for us as we don’t have to deal with complex substitutions in the html source (we’ve only tested this on Windows XP and have since heard this doesn’t work for Mac users but we haven’t had a chance to test on a Mac yet). We’re also big fans on the SMTPit Pro plugin which has a nifty function for converting rich text into HTML on the fly which makes this so much easier.
You can read more about the Data URL scheme at:
http://en.wikipedia.org/wiki/Data:_URI_scheme
http://www.ietf.org/rfc/rfc2397.txt
There’s also some good info on FileMaker and Data URL’s in the Web Viewer with some example files at:
http://sixfriedrice.com/wp/filemaker-9-tip9-web-viewers-without-the-web
I am new with File Maker Pro, and building a database for collecting patients information which include image like X-ray or scans. I used Web viewer, I can drag and drop a image onto web Viewer space. What I would like to add to the space of web viewer is “drag and drop image here”, displaying on before a patient image is dragged onto.
How to do it, please?
Hi Lihua,
It sounds like you’re after something like this:
http://blogs.sitepointstatic.com/examples/tech/filedrag/1/index.html
where you have an area with some text instructing the user to drag and drop their file to upload it?
FileMaker Pro v12 also supports drag and drop of files into container fields if you’re using that version.