Madcap Flare's Extensibility: Adding jQuery to Flare

by Tom Johnson on Jan 26, 2010
categories: technical-writing

Alistair Christie recently published a podcast about Unscripted Screencasts and Flare Extensibility. In the podcast, he considers whether scripts are necessary for corporate screencasts --  a good topic for exploration and testing. But he also gets into something a little more interesting: extending Flare with jQuery.

jQuery is the new Javascript. It provides smooth functionality that shows and hides components, slides objects around, and animates graphics in a sexy way. As an example, ProPhotoBlogs' support section incorporates jQuery functionality. And the drop-down menus on Will Sansbury's site are also jQuery driven. Here are a few jQuery animation effects. And slide-down effects. And fade effects.

Alistair says he feels satisfied he made the right choice about adopting Flare as a help tool because of this extensibility. Because of the XML and CSS standards that Flare is built on, Alistair can add a reference to the jQuery script in the header, add functions in the page body and toolbar, and hook into other technologies to customize the display.

For detailed step-by-step instructions on inserting functions into Flare's Webhelp toolbar, see Alistair's post, Adding function buttons to the Madcap Flare Web Toolbar.

I like Flare for much of the same reasons as Alistair. I haven't integrated jQuery scripts into Flare yet. But knowing that I can do it if I wanted to is encouraging.

The next question is what functionality we're missing from Webhelp. Is jQuery just the latest gee-whiz, bell-and-whistle technology? Or is it functionality that will persuade users that the help is worthwhile?

Alistair says he created a button that shows a direct link to the topic the user is viewing. And he hooked into a custom glossary database. He also integrated his own show/hide functionality and a bookmarks feature. Granted, some of that functionality already exists to some degree in the existing Webhelp buttons, but Alistair's company had custom needs.

One button I've added to Webhelp is a Contact button that allows the user to send feedback to the project team. I would like to incorporate jQuery scripts to make screencasts pop-up in a modal that dims the background. I'd also like to make screenshots expand to full size when the user clicks them (similar to Flare's new thumbnail feature). The way graphics slide down smoothly with jQuery is more elegant than the built-in drop-down hotspot functionality Flare provides. (I imagine you have to work in the code view to integrate all of this.)

I'm not sure to what extent other tools can hook into the same technologies. But it is important to have this potential -- so that help authors can keep pace with the developments and technologies of the web.

To listen to Alistair Christie's podcast on extending Flare with jQuery, see Unscripted Screencasts and Flare Extensibility.