To Place A Button to Display Map of the Route between Point A and Point B on Input Form

In the 'HTML Panel' type data item, any HTML can be described. Various modifications are possible in order to increase efficiency, as well as described links to the the work manual and template files. Let us introduce how to display Google Map with using Script tags in this article.

To Describe JavaScript in HTML Panel

Any HTML can be described in HTML Panel, one of the Process data item.
Script tags are also available, so simple JavaScript code is able to be described.

The following is an introduction of a sample how to call Google Map's route search with the value of two string type data items.
See Process archive below for the detail.
Process Archive

Explanation of Javascript program

  var from = jQuery('input[name="data\[0\].input"]').val();
  var to = jQuery('input[name="data\[1\].input"]').val();
  var url = 'http://maps.google.co.jp/maps?saddr=' + encodeURIComponent(from) + '&daddr=' + encodeURIComponent(to);
  window.open(url);

Making the Operations of DOM element(input tag, etc.) Easier with jQuery

Because Task execution screen uses jQuery, so they are available.
First, load two string type data item values. The values of name attribute of input tag, are acquired through the search on input tag by parameter name when sent to server at submit.
The parameter name is the same as those in Message Start Event or Message Catching Intermediate Event.
The Parameter name of String type data item is "data[(process data definition number)].input"

After that, construct a URL with using acquired input value, calls Google map's Route Search.

Cautions

  • Please be careful, JavaScript description in HTML Panel may effect Task Execution screen.
  • JavaScript will not work in those process models which is customized from template. There is no way to achieve the same thing.
  • HTML Panel does not support all the descriptions of HTML tags and JavaScript. Please check that error not occur in preview of Task execution screen before use.
  • There are some data type which can not acquire value, such as Table type and file type. Please use it with operation check in preview of Task execution screen.