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:
<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:
<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" />
<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
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:
<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" />
<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:
<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:
//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:
oImg.parentNode.parentNode.style.display = "none";
To show the row containing an image field:
oImg.parentNode.parentNode.style.display = "";
