Overview

Image field is used to show any kind of images in the DynaForm which may be uploaded from a local server (may be where ProcessMaker was already installed) or even images coming from 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:

<NAME ... type="image" home="base-path" file="location" ...>...</NAME>

Using a case variable:

<NAME ... type="image" home="base-path" file="@#variable" ...>...</NAME>

If the image should be searched for from a particular directory or URL, include the home parameter inside the XML definition. If set to an empty string or not included, ProcessMaker will search for the image file in the following directory:

<INSTALL-DIRECTORY>/workflow/public_html/images

Note: All images are shown on their original size. ProcessMaker does NOT resize them, but JavaScript can be used to set their width and height.

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="images/processmaker.logo.jpg">
 <en>This is the image field</en>
</PM_Image>

You need to specify the images folder form where the image will be extracted. On the DynaForm, it will display as follows:

From a URL

To display an image which is located at a URL on a web server, set the file to its web address. If the URL contains "&" make sure to URL encode it as "&&"

For example:

<ImageLink type="image" home="" file="http://mobile.freewallpaper4.me/320x480/3278-new-york-landscape.jpg">
  <en>Image from a web server</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:

    Displaying a user's photo

    The photo of a user can be displayed by setting the file parameter to the URL "../users/users_ViewPhotoGrid?pUID=USER_UID". If inserting the user's UID with a case or system variable, then include a hidden field in the DynaForm which has the same name as the case or system variable. Make sure that the value of the case variable is set before the DynaForm's step, either in a prior trigger or a prior DynaForm.

    For example, to display a photo of the currently logged-in user, create both an image field in the XML and add a hidden field named "USER_LOGGED" which will automatically contain the value of the @@USER_LOGGED system variable:

    <userphoto type="image" home="" file="../users/users_ViewPhotoGrid?pUID=@#USER_LOGGED">
        <en><![CDATA[User's Photo]]></en>
      </userphoto>
      <USER_LOGGED type="hidden" mode="edit" btn_cancel="Cancel"/>
     

    The current user's photo won't be displayed when designing the DynaForm, but when running a case, it will appear in the DynaForm:

    Accessing with JavaScript

    Image fields are not assigned an ID, so they can not be controled with many ProcessMaker JavaScript functions which use a field's ID, such as getField(), hideRow(), showRow(), hideRowById(), showRowById(), visibleById(), hiddenById(), getRowById(), setFocusById(), etc.

    In order to access an image field, use the getElementsByTagName() method to search for the < img> tag inside the DynaForm's < form>. The first image field is the third < img> in the form, because the first two are the forward and backward arrows at the top of every form.

    For example, if a DynaForm has another field named "client" and an image field, then use getField("client").form to get the DynaForm's form, and search for the third < img> tag within that form to change its width, height, source and label:

    var dynaformOnload = function() {
      //get first image field in DynaForm:
      var oImg = getField("client").form.getElementsByTagName("img")[2];
      oImg.width  = 30;
      oImg.height = 60;
      oImg.src    = "http://www.example.com/images/house.jpg";
      //change image's label:
      oImg.parentNode.parentNode.cells[0].innerHTML = "My House";
    }

    To hide the row containing an image field:

    var oImg = getField("client").form.getElementsByTagName("img")[2];
    oImg.parentNode.parentNode.style.display = "none";

    To show the row containing an image field:

    var oImg = getField("client").form.getElementsByTagName("img")[2];
    oImg.parentNode.parentNode.style.display = "";