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.

Accordion Tabs

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.

Progress Bar

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 )

[info ]It would be a good idea to set these global variables in a startup script to ensure they are available immediately for use.[/info]

Then we need to export our container image to the desktop storage area we just designated.

Next we will create a web viewer on our layout. In the web viewer specifications window, you will choose custom address and we will delete the default code and replace it with “data: text/html,” & GetLayoutObjectAttribute( “progress_code”; “content” ).

Now we can enter browse mode and we should see the progress bar displaying in our web viewer window.

Accordion Tabs
Again we need to create a new HTML document to hold our code. We are going to navigate our web browser to http://jqueryui.com/accordion/ 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’ve created.

We need to include the jQuery and jQuery UI libraries along with the CSS just as we did previously for the progress bar. We have our HTML, now let’s put it into FileMaker.

Open the FileMaker database file that we have been working with and create a new layout. On this layout, create a new text element and in the asked inspector on the position tab, give this text element name of “accordion_code”. Copy and paste HTML code that we just created into this text element. Next, create a web viewer on our way out and in the web you were specifications window, just as before we will choose a custom address we will delete the default code and replace it with ““data: text/html,” & GetLayoutObjectAttribute( “accordion_code”; “content” ). Now we can enter browse mode and we should see the accordion displaying in our web viewer window.

There are many other great things we can do using jQuery, jQuery UI and other various JavaScript libraries out there. We will be exploring more jQuery integrations in the next few weeks. I hope this tutorial has been helpful and gives you some very creative ideas on how to leverage the power of jQuery and JavaScript natively in FileMaker.

[arrow ]Download the FileMaker 13 file here. SCG_jQueryUI.fmp12[/arrow]

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