In 2014 I came across a blog article by Aaron Giard about jQuery in Filemaker. It just blew me away at that time. Much easier to program than JavaScript and the possibilities of flexible display, high speed and above all “drag & drop” capabilities for graphic elements fascinated me.
I tried the “Slider” example from the article, but as a rookie in jQuery I quickly reached my limits. I wrote to Aaron Giard at the time in the vague hope that he would take the time to perhaps write a short email.
To my great surprise I received an email shortly after that in which Aaron wrote that he had just landed in San Antonio for the filemaker DevCon and was now going to his hotel. Shortly after that I already got a corrected version and helpful tips from him, right before the start of the conference.
This email not only put me on the right track but also completely changed my view on Filemaker and jQuery.
I applied the knowledge I gained to a simple tool that had jQuery drag and drop functionality and Aaron turned it into a blog article for Scarpetta Group.
To this day I am deeply grateful to Aaron for his time and patience in answering my questions.
Aaron, I really owe you a lot and without your help many innovative solutions for my customers would not have been possible !
Since that time, I’ve been asking myself on almost every new project if jQuery is the best way to solve the problem. We will come across many more solutions later in this blog based on Aaron’s great blog article.
So here is the first little tool I have set up with jQuery.
I’ve always wanted to provide a sticky note tool for customers to easily capture notes that are not directly connected to a project.
This example is still very simply composed of jQuery dragable Script snippets. The real magic lies in calling Filemaker scripts from the webview. Because actually Filemaker and the webview don’t know anything about each other.
If you click on a button in the webview you have to trigger a script in Filemaker to perform an action.
If you change the text in the note in the webview you have to trigger a script in Filemaker to save the text in the database.
Since the web view is calculated from an unsaved formula, the display is updated as soon as the field values change in the database.
Until today I prefer the URL call from the webview, although there is now a native Filemaker function for such calls. We will see later in an article about my Kanban why I prefer this way of calling an Filemaker script.
Such a call can e.g. trigger a simple function by clicking the “+ Add note“ button in the webview:
<button onclick=”newItem()”>+ Add note</button>
The triggered function simply look like this:
function newItem() {
$( self.location = "fmp19://$/StickyNotes?script=Return¶m=New" )
};
This function calls the Filemaker script “Return” through the URL protocol like a hyperlink and passes the parameter “New”.
Since Filemaker 18 the version number must be specified in the URL.
So it is best to use a formula to generate the link.
The clever guys from Seedcode have written a great article about this topic.
The parameters must be passed URL conform – I use a character combination like “||||” to separate them.
In the Filemaker Script you can now convert the script parameter into a list by
$params = Substitue ( Get ( ScriptParameter ) ; “||||” ; ¶ )
Then you can simply use
$param1 = GetValue ( $params ; 1 )
$param2 = GetValue ( $params ; 2 )
…
to convert each parameter into a variable.
At this point you have everything you need to create a new record in the database.
It gets a bit more complicated if you want to call a single note, e.g. to change the content.
To do this, you pass the Filemaker record ID from the webview to the Filemaker script, select the record and then change or delete it.
Since every HTML object can contain an ID, it is possible to store the Filemaker record ID here.
Such a DIV should be generated in a formula field:
<div id=\““ & FilemakerId & "\">
…
</div>
For sticky notes, the calculation field in the corresponding record looks like this:
<div id=\"d" & A_ID & "\" class=\"postIt\">
<div class=\"ui-widget-header\" style=\"text-align: right\">" &
Wenn ( SizeHeight = 0 ; "" & HoleWert ( Text ; 1 ) & "" ; "" ) & "
<span class=\"pointer\" id=\"min" & A_ID & "\" onclick=\"min(this.id)\">" &
Wenn ( SizeHeight > 0 ; "-" ; "+" ) & "
<span class=\"pointer\" id=\"del" & A_ID & "\" onclick=\"del(this.id)\">" &
Wenn ( SizeHeight > 0 ; "X" ; "" ) & "
</div>" & Wenn ( SizeHeight > 0 ; "<textarea class=\"postIttext\" id=\"ta" & A_ID &
"\"onchange=\"changeText(this.value,this.id)\">" & Text & " ; "" ) & "
</div>
An HTML object in a formula field has further advantages such as being able to dynamically change an object in a webview.
We will also discuss this in a later articles. In this example I put a “d” in front of it to distinguish it from the id of the HTML textarea in the script.
To pass the id as script parameter to a Filemaker script you can write a simple jQuery function:
$( \"#d" & A_ID & "\" ).onclick(function(){
var did = $('#d" & A_ID & "').attr('id');
$( self.location = \"fmp19://$/StickyNotes?script=Return¶m=Select||||\"+did );
});"
The function reads the attribute Id when clicking on the HTML DIV object (this is the note) and executes a Filemaker „Return” script with 2 parameters („Select“ and the record Id).
The Filemaker script are simple functions to create, modify or delete a record.
As in most first attempts, the approach in this example is not yet very elegant, but it still serves its purpose today.
The trick of adapting jQuery plugins or functions is to find the point in the code where a Filemaker script needs to be called.
Even today some jQuery plugins still ‘surprise’ me with their behaviour when you find this point.
So don’t give up too fast, stackoverflow will become your best friend in these cases.
If you like to have an open version of the Sticky Notes 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.