Using jQuery UI in FileMaker – Part 1

This will be a multi-part series detailing many various jQuery integrations in FileMaker.

In this tutorial, we are going to explore using jQuery and jQuery UI libraries in FileMaker natively without requiring a web server or an Internet connection. This is made possible by using FileMaker’s data URL functionality.

For those of you who do not know, jQuery UI is a user interface library built for the web. It includes many Advanced user interface tools that can be very handy when used in FileMaker.

We are going to explore two of these interface tools:
Accordion tabs and
An indeterminate progress bar

Accordion tabs will display a vertical set of collapsing navigation tabs which can be useful to display different sets of information. This can be useful in FileMaker to display information to the user in a compact space.

An indeterminate progress bar does not display on a scale of 0 to 100% progress, Instead it notifies the user that some action is taking place and progress is being made without determining the amount of progress. This can be useful in FileMaker when executing scripts or calculations that can take some time to process to notify your user that the application is working. Granted, this is not A solution for all scenarios, But there are many where it can be handy.

For the purposes of this demo, we will be utilizing the demo code supplied on the jQuery UI website. We will create our HTML code outside of FileMaker and make adjustments before placing it into FileMaker. You may use any sort of text editing application for this such as Notepad or text edit, I will be using TextWrangler.

Progress Bar
First we need to navigate in our web browser to http://jqueryui.com and were going to click the download button in the top menu. jQueryui.com provides a nifty Interface to build the library files tailored to your specific needs. The download will contain all the jQuery and CSS that you will need. For this demo, we are going to select Core and widget from the UI core section. From the widgets section, we will choose accordion and progress bar to be included in our download. To keep the code lightweight, we will deselect all of the other features and download our files.

Now we need to create a new HTML document to hold our code. We are going to navigate to http://jqueryui.com/progressbar/#indeterminate to retrieve the demo code. Click the view source link just below the demo window. Copy and paste the demo source code into the new page that we have created.

In order to make this available off-line, Independent of an Internet connection, we are going to need to include the entire jQuery and jQuery UI libraries in our HTML code. From the package that we downloaded, we are going to open the included J query library JavaScript file in a text editor. We can copy and paste this code in place of the jQuery library reference in our HTML page. We need to do the same thing for the jQuery UI library and the CSS.

Now that we have our HTML page built, We are ready to build the FileMaker file.

Open FileMaker and create a new database file. On your layout, create a new text element and in the inspector on the position tab, give this text element a name of “progress_code”. Copy and paste the HTML code into this text element. Create a new field in the database of type container, I have named mine “progress_image”. We will use this to store the overlay image used in the progress bar. Add this field to our layout and in browse mode, add a record and inset the “animated-overlay.gif” image that was included with your jQuery UI download package. We will need to create a script to export this image to the temporary path and replace the link in the CSS of our page.

Start a new script and add 3 global variables:
1. “$$content” with the calculation of

GetLayoutObjectAttribute ( "progressbar_code"; "content" )".

2. “$$desktopPath” with the calculation of

Choose ( Abs ( Get ( SystemPlatform ) ) -1 ;

/*MAC OS X*/
“file://” & Substitute ( Get ( TemporaryPath ) ; Get ( SystemDrive ) ; “/” ) & “images/animated-overlay.gif”
;
/*WINDOWS*/
“filewin:”& Get ( TemporaryPath ) & “images/animated-overlay.gif”
)

3. “$$content” (again) with the calculation of

Substitute ( $$content ; "images/animated-overlay.gif"; $$desktopPath )