Log in
Hot & Trending on FMT

Using jQuery UI in FileMaker – Part 3

Featured Using jQuery UI in FileMaker – Part 3

I have received emails, notes, messages and comments on this blog series from many of you stating how much you’ve enjoyed the series and how it has been inspiring people all over the world to push the limits of FileMaker with web technologies. This to me is one of the single most exciting things and one of the many reasons that I love the FileMaker community. Let’s face it, we are all big geeks at heart, which is not a bad thing, we truly love what we do. When we talk, share and brainstorm together, we can create amazing things.

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 jQueryUI.com, 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 scarpettagroup.com

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


Read more: http://scarpettagroup.com/using-jquery-ui-filemaker-part-3/

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