Portage Bay
Solutions
Portage Bay

Revisited: Hashtags In FileMaker

It’s been 3 years since our post “Hashtags in FileMaker”, so we decided to give the demo a bit of a refresh and add a few features. To review, the hashtag demo utilizes a web viewer to display the user-defined “hashtags”, which then call back to FileMaker to either add, delete, or perform a find for the hashtag. Since its inception in FileMaker 14, the web viewer object hasn’t had any notable features added to it, but between FM 14 and FM 17, the web viewer seems to have become more integrated into a layout. Specifically, you no longer need to click into a web viewer in order to make it “active”, which makes for a much more seamless user interface.

I’ve made a number of small enhancements to this demo file, listed below:

  • Added a global container to store the “delete” image icon used to create the delete button for each hashtag

  • Added Find-mode functionality to search by hashtag

  • Added options to auto-complete and select hashtags from a drop-down in both Browse and Find modes

  • Removed the option to use the hash character while typing the hashtag, similar to Twitter’s interface

  • Fixed a bug when deleting hashtags

  • Updated interface

Since the web viewer is separated from fields in the database, we can’t exactly reproduce Twitter’s interface for adding and deleting hashtags inline with other text. We could grab the text entered into the web viewer with each keystroke, then perform the actions based on the keystroke code, but it’s still not quite as seamless as we’d like, so for this example, we’re separating the hashtags into their own field, then defining the specific addition/deletion/find call-back actions in the html.

For creating the refactored delete button, we’re storing the delete image in a global container field, then using FileMaker’s Base64 functions to take the image in the container, then encode it to be used as a string in the HTML. Utilizing Base64Encode allows the developer to drop in any image for the deletion button, and reuse it multiple times throughout the web viewer, all without adding much complexity.

<a href=\"fmp://$/" & Get ( FileName ) & "?script=DeleteTag&param=" & $tag & "\">" & "<img src='data:image/png;base64," & Base64Encode ( Contacts::DeleteContainer ) & "' style=vertical-align:middle />" & "</a>

In the original post, there was a note about the fmp protocol limitation in the operating system. Since then, I have discovered the RCDefaultApp which allows MacOS users to easily set the default application used for various URL schemes, file extensions, file types, MIME types, and Uniform Type Identifiers. In this case, I use RCDefaultApp to select which version of FileMaker to open when the fmp protocol is called. When I’m working in FM17, I’ll set the fmp URL to open in FileMaker 17. It’s a free download, and a must-have for any developer working with multiple versions of FileMaker.

RCDefaultApp UI

RCDefaultApp UI

The demo file included with this post is free for the taking (post email-submission), so feel free to download the file and use it to your liking. As always, if you have any questions or would like assistance customizing the Hashtag Demo for your solution, please contact us.