Add your own widgets to your forms, Example 1: Google Maps API
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
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] 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:
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"]
Step 3: Try and enjoy!
Just hit the "Run" button, and take a look at your application. It works! Wasn't that easy?