« MBS Filemaker Plugin,… | Home | Tip of the day: app.B… »

Using a HTML slider in Filemaker with Webviewer and our plugin

Well, the question today is, how do we get this slider to be used in Filemaker solutions:

The idea is to run it in a web viewer control in Filemaker. We want to get update events from the slider to update a value in our filemaker database. Also we want to have a way to update the slider with a value from filemaker. This way we can save the value in our database and load value in database while also updating it when the user changes the slider. Same way you could embed any control you find in web development toolboxes. We found a nice slider for this example.

When the solution starts, we run a startup script. This script installs the javascript callback into the web viewer. Even if the script would run several times, it does only apply changes on the first call. In the startup script, we use this line:

Set Variable [$result; MBS( "WebView.InstallCallback" ) ]

The result variable will normally be "OK" after this call. If not, please tell us as this would be a bug. After we installed callback, we need a script we call from javascript. So we create a script named "ValueChanged". This script receives the new value and stores it in the database:

We add a script called ValueChanged:

Set Variable [$value; Get ( ScriptParameter ) ]
Set Field Value Slider::SliderValue; $value]

In the HTML file, we add this to the script section:

function CallFM( fileName, scriptName, scriptParameter)

The plugin installs code on the window.status property, so it can call a script for you. To control it, you assign filename, script name and parameter with colon separated. For convenience we have this javascript function above which calls for us, so we just call that function wherever we need.

Next we need to change the change event. The slider has a change event where we add some code to pass the value to Filemaker. We query getValue() function on the javascript slider and call the CallFM function passing script name and parameters. So the change event looks now like this:

s.onchange = function () {
v = s.getValue();
CallFM("slider.fp7", "ValueChanged", v);

Now in order to set the slider to the initial value, we use a line like this:

Set Variable [$result; MBS( "WebView.RunJavaScript" ; "web"; "s.setValue(" & Slider::SliderValue & ")" ) ]

In order to have it working, call the web viewer control "web". This way the plugin can locate the web viewer and run the javascript code inside it. We call setValue function in javascript to pass the filemaker value. As you see javascript is created on the fly here with the calculation.

This final result looks like this on Mac OS X in Filemaker 11:

and on Windows:

download example database: filemakerslider.zip
29 01 12 - 22:40