Log in
Hot & Trending on FMT

Using jQuery UI in FileMaker – Part 2

Featured Using jQuery UI in FileMaker – Part 2

[FMT Connect Link] This is one of favorite articles from Aaron and our partners at the Scarpetta Group on jQuery and how to take your FileMaker Interface to the limit. Hi everyone, this is Aaron, front end web developer at The Scarpetta Group. I am back with part 2 of my 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.


 

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.

Screen Shot 2014-07-11 at 1.38.12 PM

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.

$( “#slider-range-max” ).slider({ range: “max”, min: 1, max: 10, value: 2, slide: function(…

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…

$( “#slider-range-max” ).slider({ range: “max”, min: <<slider_min>>, max: <<slider_max>>, value: <<slider_selected>>, slide: function(…

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.

 $( “#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&param=”+str ;

$(‘form’).attr(‘action’, FMPURL );

$(‘form’).submit();

}

});

Finally, I need to create a simple script that will take the value passed from the slider and set the field.

Screen Shot 2014-07-11 at 2.01.47 PM

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. Until next time…ciao!

- Aaron

If you have any questions or would like to have assistance implementing these features in your solutions, please contact us at scarpettagroup.com

Aaron Giard
The Scarpetta Group, Inc.
Front End Developer
This email address is being protected from spambots. You need JavaScript enabled to view it.
@AaronGiard

The Scarpetta Group

The Scarpetta Group, Inc. is a Platinum FileMaker Business Alliance Member, specializing in custom FileMaker solutions for desktop, iOS and web. Our expertise is understanding our clients’ needs and translating their requirements into successful software solutions that enhance their business, improve efficiency and streamline workflows. We accomplish this through years of project management, diverse skill sets and industry experience.

Whereas many development firms handle only FileMaker development, we leverage our web development strengths and vast knowledge of bringing FileMaker to the web to set us apart. With more than 15 years of experience, The Scarpetta Group has completed countless projects for small businesses to international Fortune 500 companies. These projects have ranged from single iPad applications using FileMaker Go to 100+ user management systems, CRMs, Content Management Systems, Custom PHP APIs and complex web applications.

In the last five years, The Scarpetta Group has grown from a single employee and a team of subcontractors to five full time developers and a team of subcontractors. In 2013 The Scarpetta Group began hosting a FileMaker Pro User Group that has proven to be very successful and considered to be one of the larger user groups in the Southeast.

No matter what data challenges your company faces, The Scarpetta Group has the expertise to lead you in the right direction with your data management and get your company on the road to efficiency. Contact us today.

Website: scarpettagroup.com