I have long wanted to incorporate the tags used everywhere into a Filemaker project and so I was pleased that a
customer of mine needed such a solution.
So I programmed a portal solution graphically based on the tags into his Filemaker database.
But no matter how much effort I put into it, it remained what it was: A Filemaker portal that just feels different
and doesn’t offer the same comfort as an HTML solution.
So what is the alternative again ?
Right, I immediately start looking for a slim and easily adaptable JQUERY plugin.
After a short search I found the fantastic tagEditor plugin by Simon Steinberger / Pixabay.com.
https://ivalue.tw/assets/js/tageditor/demo.html
The functionality offers exactly what I was looking for and the interface looked almost exactly like I wanted it to.
So after we have the right plugin we can start right away – so let’s code.
For my sample file, I used far from all the functions that the plugin offers, but even with the few functions included, the result was much better than with pure Filemaker on-board.
To use the plugin in FM we first need a database with a parameter table for the JQUERY and the plugin files:
Parameter:
JQuery [Text]
JQuery_ui.js [Text]
jquery.tag_editor.css [Text]
jquery.tag_editor.min.js [Text]
HTML [Text]
In the single record we store the files of the same name from the JQUERY website and the tagEditor website.
In the HTML field we place a small HTML document with placeholders, which we replace in the “webview” calculation of the tags table with the documents from the parameters table:
HTML
<!DOCTYPE html>
<html lang="en“>
<head>
<meta charset="utf-8">
<script type="text/javascript“>__jqueryLib</script>
<script type="text/javascript">__jqueryUI</script>
<script type="text/javascript">__editor</script>
<script type="text/javascript">__suggest</script>
<style>
html, body{
margin: 0px;
padding: 0px;
overflow-y:hidden;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
$(‚#tag').draggable({ scroll: false });
$('#tag').tagEditor({
maxTags: 4, initialTags: [__tags],
delimiter: ', ', /* space and comma */
placeholder: 'Enter tags ...',
sortable: true,
animateDelete: 170,
onChange: function(field, editor, tags) {
FileMaker.PerformScript ( 'Return', 'TagList||||' + (tags.length ? tags.join('||||') : '') );
}
})
});
</script>
<div style="margin:0 0 0 em“>
<input id="tag" class="tag-editor-hidden-src" style="display: block;" readonly=„readonly“></input>
</div>
</body>
</html>
Next, a simple table for the tags:
Tags:
webview [Calculation, unstored]
tags [Text, indexed]
webview =
Substitute ( Parameter::HTML ;
["__jqueryLib";Parameter::JQuery] ;
["__jqueryUI";Parameter::JQuery_ui.js] ;
["__script";Parameter::Script] ;
["__editor";Parameter::jquery.tag_editor.min.js] ;
["__css";Parameter::jquery.tag_editor.css] ;
["__tags";"'" & Substitute ( tags ; ¶ ; "', '" ) & "'"]
)
The field ‚tags’ takes the tag entries as a list and is sorted the same way as the tags in the input field, we will see in a moment how this is done.
The two tables are connected via an “X” relationship:
The Filemaker script is a very simple one and just writes the tags into the corresponding field of the Tags database table.
# Return in file Tags
Set Variable [ $ReturnValue ; Value: Get ( ScriptParameter ) ]
Set Variable [ $ReturnValue ; Value: FMScriptEscape ( $ReturnValue ) ]
Set Variable [ $function ; Value: GetValue ( Substitute ( $ReturnValue ; "||||" ; ¶ ) ; 1 ) ]
Set Error Capture [ On ]
#
If [ $function = "TagList" ]
Set Variable [ $Value ;
Value: Let (
[
theList = Substitute ( $ReturnValue ; "||||" ; ¶ ) ;
tags = RightValues ( theList ; ValueCount ( theList ) - 1 ) ] ; Left ( tags ; Length ( tags ) - 1 ) ) ]
Set Field [ Tags::tags ; $Value ]
End If
#
It uses a custom function ‚FMScriptEscape’ that replaces the unwanted characters from the tags.
This prevents problems with special characters in the webviewer during display.
FMScriptEscape (text)
Substitute ( text ; [ "__slash__" ; "/" ] ; [ "__auml__" ; "ä" ] ; [ "__Aauml__" ; "Ä" ] ; [ "__uuml__" ; "ü" ] ; [ "__Uuml__" ; "Ü" ] ; [ "__ouml__" ; "ö" ] ; [ "__Oouml__" ; "Ö" ] ; [ "__szet__" ; "ß" ] ; [ "__amp__" ; "&" ] ; [ "__plus__" ; "+" ] ; [ "__minus__" ; "-" ] ; ["__'__" ; " " ] ; [ "__glz__" ; "=" ] )
Now we have everything to display a webview with the tag plugin and store the tags in a Filemaker field.
The magic actually only happens in the Filemaker script call from the HTML file:
FileMaker.PerformScript ( ‘Return’, ‘TagList||||’ + (tags.length ? tags.join(‘||||’) : ”) )
Here the Filemaker script is called and the tags are passed as a list with the separator “||||”. Since this list is already in the same order as the input, we don’t need to do anything more than replace the pipes with Filemaker returns and write them into the field – incredibly easy with this tagEditor plugin !
The return path of the tags into the HTML file is then only done by replacing the placeholder ‘__tags’ in the line
initialTags: [__tags],
by the Calculation field ‘webview’.
Finally we create a simple layout with the webview (for debugging I have also shown the ‘Tags’ field).
To allow the user to search for tags later, I simply placed the ‘Tags’ field under the webview.
In the ‘Tags’ field I disabled the input and enabled the search.
I simply hide the webview in search mode:
Get (WindowMode) ≠ 1
You can use the plugin much more and especially an autocomplete function for the tag input I would like to have realized.
If you like to have an open version of the file, just send me an email.
You have any questions? Feel free to send me an email, I’ll try to answer as soon as possible.