From Business Process Management, BPM and Workflow Automation Wiki | BizAgi BPMS

<keywords content="keywords"> google maps, dynamic map, dynamic google map, dynamic location, vendor address, extend forms, customize forms, customize form, userfield, userfields, iframe </keywords>

Contents 1 How to embed a dynamic google map in Bizagi 1.1 Overview 1.2 Prerequisites 1.3 What you need to do in Bizagi 1.4 Example 1.4.1 Creating a userfield 1.4.2 Using an HTML frame in the userfield's code 1.4.3 Creating an attribute for the userfield 1.4.4 Including the userfield in the form 1.5 Result 1.6 Related Articles

How to embed a dynamic google map in Bizagi

Overview

In this article we will illustrate how to embed a google map in Bizagi. The google map we embed in a process, is dynamically set to point to the specific location of a given address (inputted from a previous process activity).

In the followin image we see a google map shown dinamically, according to the location entered in the process:

To accomplish this, in Bizagi we make use of 2 important features: invocation of a REST service from a process, and use of custom HTML in process forms. The REST service invoked is that one provided by Google Maps API. Further information about this configuration, is presented in the next prerequisites section.

The use of custom HTML in an activity form, is possible through Bizagi's userfields.

Userfields allow inclusion of extended functionality to your process forms, so that you can add any HTML control (which is not in the comprehensive set of renders offered in Bizagi. The comprehensive set of renders in Bizagi include: comboboxes, upload controls, radio buttons, and inputs, amongst others.

Prerequisites

To follow the example in this how-to, make sure you have read and done the how-to presented at How to invoke a REST service from Bizagi.

What you need to do in Bizagi

To extend the how-to's approach from the prerequisites article, we will need to do in Bizagi the following steps:

1. Creating a userfield.

2. Using an HTML frame in the userfield's code.

3. Creating an attribute for the userfield.

4. Including the userfield in the form (user interface).

Example

In this article we will work with the same example as in "How to invoke a REST service from Bizagi", and we will part from what was done in that article.

In our "Create Vendor" process in Bizagi, changes in the user interface (form) will be done at the "Verify vendor" activity:

The main objective is to handle the latitute and longitud information (as returned from the REST service invocation) dynamically so that it is included in the shown google map.

Creating a userfield

Our first step is to create a userfield to use for the rendering of the google map.

This is done by clicking in the "User fields" option at the Tools menu. We then click on "Add" and include a name and description for our userfield. We specify the it applies to String type attributes, and select "App" as the context entity:

Now we edit its code by clicking on the "Edit Code" option.

Using an HTML frame in the userfield's code

Now we can customize the userfield so that we add HTML code to show the google map within the form.

Notice that google maps already provides the embedded map possibility as an internal frame (<iframe> HTML) object:

We copy and paste the content from google map directly in the bottom of our userfield. We edit the pasted code so that it contains dynamic variables from the information inputted in the process (using the stored latitude and longitude coordenate values).

At the end, our userfield's code will look like:

The added HTML code is:

FieldResponse.AppendHTML("<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'");
FieldResponse.AppendHTML("src='http://maps.google.com/?q=" + <MyProcess.LocationInfo.Latitude> + "," + <MyProcess.LocationInfo.Longitude>);
FieldResponse.AppendHTML("&ie=UTF8&t=m&z=14&ll=" + <MyProcess.LocationInfo.Latitude> + "," + <MyProcess.LocationInfo.Longitude> + "&output=embed'>");
FieldResponse.AppendHTML("</iframe><br /><small><a href='http://maps.google.com/?q=" + <MyProcess.LocationInfo.Latitude> + "," + <MyProcess.LocationInfo.Longitude>);
FieldResponse.AppendHTML("&ie=UTF8&t=m&z=14&ll=" + <MyProcess.LocationInfo.Latitude> + "," + <MyProcess.LocationInfo.Longitude>);
FieldResponse.AppendHTML("&source=embed' style='color:#0000FF;text-align:left' target='_blank'>View larger map</a></small>");

We click on "Ok".

Creating an attribute for the userfield

Now that we are done creating our userfield, we need an attribute to bind that userfield to. We will create that attribute in the main "App" application entity (given that our userfield context's entity was "App").

To create the attribute, we go to the Modules view and select the "Entities" module. Under entities, we locate the "App" application entity and edits its attributes to create a new String type attribute:

Including the userfield in the form

Finally, we include the userfield we created and bind it to the previously created attribute. This is done for an activity's form.

To do this, we go to the Process Wizard step #3 ("Define forms") and edit the form of our "Verify Vendor" activity:

Notice that we included our usefield and also defined explicitly its data binding to the previously created attribute in the "App" entity.

We save and close the form.

Result

Now we can run our "Create Vendor process", and test the shown dynamic google map in the work portal.

To do this, run the process from the "Run" button in the quick access options:

In our workportal, we create a new "Create Vendor" case and input the vendor's address in our "Register Vendor information" activity (address words separated by the "+" character for this example):

After Google Map's REST service invocation, we will obtain the latitude and longitude coordenates for the Vendor's address. Both the latitude and longitude are no longer necessary since as an enhancement, we can see the google map directly pointing to that location:

At this point, we have a process in Bizagi to Create Vendor, with an embedded dynamic google map of the Vendor's address!

Related Articles

• How to invoke a REST service from Bizagi.
• Special mapping features and functions for services invocations

<comments/>