2.0/Image

Image field is used to show any kind of images in the DynaForm which may be uploaded on a local server (may be where ProcessMaker was already installed) or even images coming form different resources (Web, data repositories, etc.).

Even if this field may seem as a new one on ProcessMaker, it was created for previous versions but it was disabled for recent ones; it's not possible to find this filed where DynaForms fields are listed but just adding a simple xml definition it will be working on any DynaForm.

XML Definition

Using Images form a local server:

<NAME ... type="image" file="image_path" ...>...</NAME>

Using Case Variables

<NAME ... type="image" file="@#myimage" ...>...</NAME>

It is possible to use home as a parameter inside XML definition; if it keeps without any value, it is possible to specify a complete URL for the image, otherwise images are searched on:

INSTALL-DIRECTORY>/workflow/public_html/images

Note: all images are shown on their original size. ProcessMaker DOES NOT resize them.

How to use an image field

From a local server

For example if the requirement is to show an image in a DynaForm, just add on the XML definition the following sentence:

<PM_Image type="image" file="processmaker.logo.jpg"">
 <en>This is the image field</en>
</PM_Image>

On the DynaForm it will display as follows:

From an external link

As it was explained before, images can be shown by using the home parameter empty, for example using the following code:

<ImageLink type="image" home="" file="http://mobile.freewallpaper4.me/320x480/3278-new-york-landscape.jpg">
<en>Image Field using a link</en>
</ImageLink>

On the DynaForm it will display as follows:

Using Case Variables

As it was mentioned before, it's possible to define a case variable where the image will be saved, this case variable will be defined as a parameter inside the XML definition of the image.

Loading Images with a Trigger

1. Create a Dynaform where image will be loaded, it will have the following variables:

• A hidden field with the name of the variable that will be use as a case variable on the field where the image will be loaded.

<Image_Link type="hidden" />

• The image field using as a file parameter the name defined on the trigger

<ImageField type="image" home="" file="@#Image_Link">
<en>This is the image field loaded from a Case Variable</en>
</ImageField>

2. Create a Trigger where Image_Link will have the image URL

@@Image_Link="http://mobile.freewallpaper4.me/320x480/3278-new-york-landscape.jpg";

3. Assign the trigger before the Dynaform

And the image will be loaded in the DynaForm.

Using a TextBox to Load Images

1. Create a Dynaform with a TextBox field where the URL of the image will be written:

<ImageField type="text" maxlength="100" validate="Any" required="0" readonly="0" size="50" mode="edit" btn_cancel="Cancel">
<en>Enter the URL for the image</en>
</ImageField>

2. Create a second dynaform with the following XML definitions:

• A hidden field with the name of the variable that will be use as a case variable on the field where the image will be loaded.

<Link1 type="hidden" />

• The image field using as a file parameter the name defined on the textbox:

<ImageField type="image" home="" file="@#Link1">
<en>This is the image field loaded from a textbox field</en>
</ImageField >

3. Run the case, as a first Dynaform the URL of the image must be entered:

Click on Submit and on the second Dynaform the image corresponding to that URL will be loaded: