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 <script…> 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):
<divid="dialog"title="Basic dialog">This is a dialog "popped-up" from an application generated with Bonita Open Solution!</div>
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
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:
<!-- OPTIONAL: include this if you want history support -->
<!-- loading displayed while GWT is not yet ready --> <divid="loading"> <divid="bottom-right-shadow"> <divid="loading-content"><imgsrc="images/large-loading.gif"alt=""/><!-- Please wait while loading... --></div> </div> </div>
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:
<scripttype="text/javascript">// <![CDATA[ var map;
var myLatlng = new google.maps.LatLng(45.18409395583682,5.703503018447886); var myOptions ={ zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Where are you?", draggable: true }); google.maps.event.addListener(marker, 'dragend', function(){ var point = marker.getPosition(); // Update fields. document.getElementById("latitude").getElementsByTagName("input")[0].value= point.lat(); document.getElementById("longitude").getElementsByTagName("input")[0].value= point.lng(); }); //]]></script>
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?
