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

<keywords content="keywords"> userfields, google, links, external link, embed, custom HTML, html, iframe, frame, img, href, google map, google maps, embed web, customize forms, custom form, customize form </keywords>

Contents 1 How to customize forms in Bizagi 1.1 Overview 1.2 What you need to do in Bizagi 1.3 Example 1.3.1 Creating the userfield containing the HTML code 1.3.2 Including the userfield in your form 1.4 Related Articles

How to customize forms in Bizagi

Overview

Bizagi offers an out-of-the-box comprehensive set of field types to include in your activities forms. These field types are the most commonly used and required by any process, such as an upload control, comboboxes, radio buttons, and inputs, amongst others.

However, it is also possible to include extended functionality to your process forms (user interfaces), so that you can add any HTML controls (which are not already in the comprehensive set of renders offered in Bizagi).

If you wish to customize your process forms and include extended HTML functionality, you can create Bizagi userfields.

Through Bizagi userfields, you may show links to external pages, custom buttons, videos, images, internal frames with other information, or embed a custom or web application, amongst others.

What you need to do in Bizagi

Including HTML code inside a form of any activity in your process, is done by:

1. Creating the userfield containing the HTML code.

2. Including the userfield in your form.

Example

In this article, we will illustrate how to embed a sample google map inside a form in Bizagi:

Creating the userfield containing the HTML code

Before we begin, we get the HTML code representing the embedded google map from the source site.

For this example, this is done by copying the link content from maps.google.com:

Next, we go to the Tools option in Bizagi Studio's menu ribbon, and select the Userfields option.

We add a new userfield, and specify: a name, a description, and to which data types it will apply ("all" is valid option):

For the sake of the simplicity of this example, we will not use parameters for the userfield.

We click on the Edit code option and include the HTML code:

Notice that this code needs to be appended to the userfield by using the FieldResponse.AppendHTML() method.

The code added to the userfield in our example is:

FieldResponse.AppendHTML("<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'");
FieldResponse.AppendHTML("src='http://maps.google.com/?ie=UTF8&ll=26.74561,-25.488281&spn=70.868378,162.773438&t=m&z=3&output=embed'></iframe>");
FieldResponse.AppendHTML("<br /><small><a href='http://maps.google.com/?ie=UTF8&ll=26.74561,-25.488281&spn=70.868378,162.773438&t=m&z=3&source=embed'");
FieldResponse.AppendHTML("style='color:#0000FF;text-align:left' target='_blank'>View Larger Map</a></small>");

We save the userfield by clicking on "OK".

Including the userfield in your form

Now that we have created our userfield, we go to the Process wizard view in Bizagi Studio and go to the "Step 3: Define forms" option for our process:

We select the activity in which we want its form to show our userfield embedded information (in this example, the google map).

In its form, we include the userfield we created in our previous step:

We save the form, and proceed to run our process in the work portal.

At this point we are set extending the functionality of our process forms, through an example of an embedded google map in Bizagi!

Related Articles

• View more information about Bizagi userfields

• View a more sophisticated example of embedding applications into Bizagi with userfields

<comments/>