Add your own widgets to your forms, Example 2: leveraging jQuery

In a previous post, I explained how it is possible to add complex widgets made with JavaScript in a Bonita Form Application, and also how this widget can interact with the data in your process. That example widget was a Google Map. In this post, I'll start with one of the user requests in the Bonita Community bug tracker, in order to show you how to embed and leverage RIA JavaScript framework, such as jQuery, in your application. We'll create a dialog box in a form, and as you'll see, it's easy.

Add jQuery resources to your application

This is an example of why there is a Resource tab. First get all the necessary resources from jQuery by downloading them from the website, and add all the folders you need in the applications folder.

That's all!

Tweak your main HTML page to include jQuery

This is a mandatory step that you have to perform whenever you want to add JavaScript to your applocation. First, retrieve the BonitaApplication.html that you can get by hitting Run, and show the source code for the page. This is your main HTML page. Then add the necessary headers to the head element of the page, in order for jQuery to run. And then, simply add the modified BonitaApplication.html in the application resource folder.

Now, use jQuery!

jQuery is added and enabled in your application. Just do it! Put an HTML widget in your form, and add the content below (copy-pasted from jQuery documentation): [cc lang="html"]

[/cc] Et voila!

A few more things

• The example can be downloaded from the Bonita community.
• In some cases, you can put the script headers wherever you want in the HTML page, and you can put it in other templates for your application, or directly in the HTML widget. However, this is not a good practice for compatibility, and the only way to ensure your scripts are loaded is to put them in BonitaApplication.html.
• If your jQuery widget has any input fields, use callbacks on them to set the value of the fields defined in your form designed in Bonita Studio. Add "hidden field" for the data handled by the widget, and change the value of the hidden input with a callback. See the Google Maps example in previous post for a more complete example.
• And while I am writing about dialog boxes, I'm hearing this music. Coincidence? I don't think so. AEED - Dialog Box by AEED