Part 2 of the series on using jQuery UI in FileMaker.
In this tutorial, I am going to explore using the jQuery UI slider control in FileMaker to set a value on a predetermined scale. I will be using FileMaker’s data URL functionality and sending data back to FileMaker using the FMPURL method.
For those of you who who have not read it, click to read part 1 of this series to get a preface on some of the techniques I am using to make this happen.
I want to create a slider in FileMaker like the one below. When I interact with this slider, I want to send the selected value back to a FileMaker field. This one will be a quick and easy integration.
[CDATA[ $(function() { $( “#slider-range-max” ).slider({ range: “max”, min: 1, max: 10, value: 2, slide: function( event, ui ) { $( “#amount” ).val( ui.value ); } }); $( “#amount” ).val( $( “#slider-range-max” ).slider( “value” ) ); }); // ]]>
So first of all, I need to create our HTML code that will produce the slider control. Sample code can be downloaded from jQueryUI.com. I am working with the “Range with fixed maximum” sample.
Next I will need 3 fields in FileMaker, slider_min, slider_max, slider_selected. I will create a layout with these 3 fields, a webviewer object and a text object to hold our HTML code.
Now I need to replace a few things in our HTML so that the slider data is replaced with the data I enter into FileMaker fields. In the jQuery function which creates the slider, there is a section that defines the min, max and selected values of the slider.
[pre ]$( “#slider-range-max” ).slider({ range: “max”, min: 1, max: 10, value: 2, slide: function(…[/pre]
I need to replace the values with merge variables for the fields we’re using in FileMaker The altered code would look something like this…
[pre ]$( “#slider-range-max” ).slider({ range: “max”, min: <>, max: <>, value: <>, slide: function(…[/pre]
The next piece of this puzzle is to send the selected value data back into FileMaker. Since I am targeting the file that we have open in FileMaker, our URL will be a bit different. I also want this functionality to trigger when I change the slider and I don’t want to have to click a “submit” button. Luckily, many of the jQuery UI controls offer callbacks to do these type things.
In the jQuery slider function, I am going to add an event listener for when the slider has been changed, then we’re going to tell it to send the data to FileMaker one the change event is fired.
[pre ] $( “#slider-range-max” ).slider({
range: “max”,
min: << min_value >>,
max: << max_value >>,
value: << slider_value >>,
slide: function( event, ui ) {
$( “#amount” ).val( ui.value );
},
change: function(event, ui) {
event.preventDefault();
var str = $(‘#amount’).val();
var FMPURL = “fmp://$/YOUR FILENAME?script=YOUR SCRIPT NAME¶m=”+str ;
$(‘form’).attr(‘action’, FMPURL );
$(‘form’).submit();
}
});[/pre]
Create a simple script that will take the value passed from the slider and set the field.
And that’s it, now I can slide the slider and it changes the data in FileMaker. There are many useful ways this could be implemented. Are you thinking of a solution this would be perfect for? If so, share your thoughts with us. I hope you’ve enjoyed this jQuery UI implementation in FileMaker.
[call_two href=”https://scarpettagroup.com/filemaker-contact-us/” label_button=” Contact us!” class=”call-to-action-two” colorstart=”#c4c4c4″ colorend=”#FFFFFF” colortext=”#000000″ icon_size=”20″ color=”” align=”vertical” width=”small” icon=”icon-check” ]If you have any questions or would like to have assistance implementing these features in your solutions, please contact us at scarpettagroup.com[/call_two]
// ]]>
