Here is an explanation of how to add your own custom widgets to the applications generated by Bonita Open Solution. This is something a lot of Bonita Open Solution users have been asking for on our forum, and here is one solution!

In this mini-tutorial, I’ll use Bonita Open Solution 5.4 with its new HTML widget in the form designer, but the same method can be applied to older releases of BOS. You’ll simply have to use a Message widget with the “Allow HTML” flag set to true.

Example 1: Using the Google Maps API

Google provides a great JavaScript API for almost all its products. Let’s use the Google Maps API for the interaction between the Forms application of your process and a Google Map. The user will see – instead of 2 text widgets to input longitude and latitude – a Google Map with a marker to drag and drop in order to indicate a location. Let’s start with a simple process with 2 text variables: latitude and longitude.

The process with its data

Your widgets will make your pages nicer!

If you really don’t want to do it yourself, you can find this example process in the community contributions.

Step 1: Reference the API in BonitaEnvironment.html

In order to leverage the API, you need to define a reference to it in your application. In my opinion, that’s the trickiest part, although it’s still quite easy, and we’ll probably make this step even easier to do in a future release.

You need to add the following lines to the header of the BonitaApplication.html file:

Then create a new process and run it, get the source of form page, this is BonitaApplication.html. Add the necessary lines. The result should look like this:

Then, add it to your Forms resources so that the default BonitaApplication.html is replaced by the one you just tweaked:

Add BonitaApplication.html to your application resources

Step 2: Model your form

Your form will be very simple to model. It is simply made of 2 hidden fields: latitude and longitude. These widgets add 2 input fields you’ll use to store and save the location marked in the Google Map. Since a Google Map is not a basic HTML input, we cannot directly retrieve its values to store them later. Then we’ll make the Google Map widget store the data we want to use later in those fields.

Then add your HTML widget (or Message widget allowing HTML in older versions). Put in the following code as the initial value:

This script adds a map to your page and updates the hidden fields whenever you move the marker. As you can see, this is simply HTML, JavaScript and Google Maps API, nothing more!

Form overview

Step 3: Try and enjoy!

Just hit the “Run” button, and take a look at your application. It works! Wasn’t that easy?

A very cool integration!

Tags: AJAX, Bonita, Bonita Open Solution, JavaScript, RIA

This entry was posted on Friday, February 4th, 2011 at 12:26 pm and is filed under Example, Tutorial, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.