Add your own widgets to your forms, Example 1: Google Maps API

ttoine's picture
ttoine
Blog Categories: 

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:

[cc lang="html"]

[/cc] 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:

[cc lang="html"]

[/cc]

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: [cc lang="html"]

[/cc] 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!

Comments

Submitted by robintan on Tue, 12/03/2013 - 09:55

hi,something missing when migrate from old site.

Submitted by nicolas.truchaud on Wed, 12/04/2013 - 10:55

Hello,

Same remark as Robintan : could you please correct the linked elements of this page ?

Thanks in advance,

Nicolas

Submitted by eman on Tue, 03/25/2014 - 12:40

this is not what i need , i need to know the basic information about the forms in bonita like how to create form,is it possible to copy forms, main aspects of form in bonita.

Submitted by ee_prasad_1353433 on Wed, 10/18/2017 - 18:56

I want to integrate (on Bonitasoft form) Google Map API with Bonitasot to get route distance and time data for selected locations on map.
Is it possible to show google map layer on Bonitasoft?

Prasad

Notifications