In part 3 of this series I am going to showcase a user submitted solution from Stephan Bansemer 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.
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.
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).
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.
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!
[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]
[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]
