The Original FileMaker Community
Business Templates - Demo Apps - Video Tutorials -Samples - Help - 46000 Member Forum

The Leading Filemaker Developer Tools

Using jQuery UI in FileMaker – Part 3 – FileMaker Today

Get real time updates directly on you device, subscribe now.

In part 3 of this series I am going to showcase a user submitted solution from This email address is being protected from spambots. You need JavaScript enabled to view it. who works with Attend GmbH in Hamburg and is a freelance FileMaker developer. Stephan read the previous blogs in this series and decided to take on one more level of jQuery fun in FileMaker by implementing jQuery UI’s ‘Draggable’ and ‘Resizable’ functions together into a single layout interface.

The same methods can be used from Part 1 and Part 2 to include the jQuery and jQuery UI libraries for the demo.

Stephan created a layout with a field to view the HTML code on the left alongside a live view of the HTML in a web viewer on the right.

DragNResize_Stephan_ Bansemer

By using the demo HTML code for ‘Draggable’ and ‘Resizable’ interactions from, Stephan was able to create web viewer content that interacts with the fields in FileMaker.

The user is able to create new boxes, resize them, change the title bar of the box, change the content of the box and position the box with a ‘snap to grid’ alignment. As you can see below, in just a few short minutes, I was able to create a simple newsletter style page layout by simply using the web viewer to drag, resize and alter my boxes as if it were a page layout application. I added a little bit of HTML code to the ‘Text’ content of some of my boxes to produce a bulleted list, italicized text, bold text and altering font sizes and alignment.

DragNResize_Stephan_ Bansemer_4

When you click on a box in the web viewer, you are presented with a custom dialog with fields to set the title bar text and content of the box you’ve clicked (FMPURL at work here).

Using jQuery UI in FileMaker – Part 3

At the bottom of the layout, there is a section of data that is set in FileMaker via the FMPURL method for the coordinates and dimensions of each box when it is selected in the web viewer. You also have the ability to create new boxes with a ‘New’ button in FileMaker.

DragNResize_Stephan_ Bansemer_2

I could see this implementation being a very valuable technique for many FIleMaker driven tools.

Kudos go out to Stephan Bansemer for this amazing usage of jQuery and jQuery UI in FileMaker and thanks so much for sharing it with me. I truly hope it inspires you to think outside of the FileMaker box, now go build something awesome!

– Aaron

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

Aaron Giard

Front End Developer

The Scarpetta Group, Inc.

FileMaker 12 Certified Developer

This email address is being protected from spambots. You need JavaScript enabled to view it.

twitter: @AaronGiard

Posted by Aaron Giard in FileMaker, Tips and Tricks

Tags: FileMaker, jQuery, Techniques, Web development

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More