Embedding Multiple Images Into Dynaforms

Most organizations who are utilizing ProcessMaker to manage their workflow take advantage of the Document Management System (DMS) to upload input documents and pass them along with the case it belongs to.  But did you know that if your input document happens to be an image or group of images, then you can embed those images into your Dynaforms for your users to see at a glance?

This type of image embedding can be useful in many different scenarios, whether you are passing design concepts to other teams, or scanned images of receipts for an expense report.

 

It’s easier than you might think:

1 – In the process map, declare the input documents as you normally would.  Each image must be assigned as an input document, therefore, if you want to embed 3 images, you require 3 input documents.

2 – Add 3 “Input Document” fields to one of your Dynaforms.  These appear as “Browse” buttons on the form.

Browse Buttons

You need one browse button for each image

3 – Now we need a method of grouping those images into one variable and telling a subsequent Dynaform to call on that variable and embed it into the form.  This is done with a Trigger.  Create a CUSTOM trigger and paste the following code into it:

require_once ( “classes/model/AppDocumentPeer.php” );
$oAppDocument = new AppDocument();
$query=”SELECT APP_DOC_UID FROM APP_DOCUMENT WHERE APP_UID='”.@@APPLICATION.”‘”;
$docu=executeQuery($query);
$imagen = ”;
foreach ($docu as $value)
{
$sAppDocUid=$value[‘APP_DOC_UID’];
$oAppDocument->Fields = $oAppDocument->load($sAppDocUid,1);
$info = pathinfo( $oAppDocument->getAppDocFilename() );
$ext = $info[‘extension’];
$dest=PATH_UPLOAD.@@APPLICATION;
$folderPermission=0777;
if(!is_dir($dest)){
@@exitodir= mkdir($dest,$folderPermission);
}
if(!file_exists($dest.”/”.$sAppDocUid.’_1.’.$ext)){
@@exitoFile=copy(PATH_DOCUMENT.@@APPLICATION. ‘/’ .$sAppDocUid.’_’.’1′.’.’.$ext,$dest.”/”.$sAppDocUid.’_1.’.$ext);
}
$ext = “http://”.$_SERVER[‘HTTP_HOST’].”/files/”.@@APPLICATION.”/”.$sAppDocUid.’_1.’.$ext;
$img = ‘<img src=”‘.$ext.'” width=”200px”> ‘;
$imagen .= $img;
}
@@IMAGE=$imagen;

4 – Put your trigger into the task where your Dynaform to upload the images is located.  The trigger needs to execute before the Dynaform is called.  There shouldn’t be any conditions for the trigger.

5 – Now to build the Dynaform that will display the images.  Build a Dynaform in the usual fashion with any fields you want it to contain.  Now to make 2 very important edits:

Go to the XML tab in the Dynaform editor and on line 2, look for mode=”edit”.  Now remove the word “edit” and leave the quotes.  You should leave it looking like this: mode=””

Paste the following line of XML code into a new line anywhere in the XML.  Remember that the position of this line dictates where the images will be displayed in the form:

<IMAGE type=“text” mode=“view” enablehtml=“1”/>

Note:  You will not see this field in the preview mode of the Dynaform.

 

XML Tab view

Note mode="" and the extra code on line 6

 

 

 

 

 

 

6 – Now run a case, upload some images and watch them appear neatly in your Dynaform.

 

Embedding Succesful

3 sample images embedded into my Dynaform

 

 

 

 

 

 

 

 

Additional Notes:

  • You cannot display the images on the same form that you are using to upload the images.  The images are only stored in ProcessMaker after the “Submit” button has been pressed.
  • You can continue to display the same images in later forms, simply follow step 5 for other forms that take place AFTER the uploading step.
  • ProcessMaker is treating all of your images as ONE variable.  Therefore, if you want to upload more images later in the process and have them displayed the same way, you will need another trigger that assigns a different variable name to the newer images.
  • To change the size of your images, go back to the trigger and change the width setting near the bottom of the PHP code:

$img = ‘<img src=”‘.$ext.'” width=”200px”> ‘;

 

require_once ( “classes/model/AppDocumentPeer.php” );

$oAppDocument = new AppDocument();

$query=”SELECT APP_DOC_UID FROM APP_DOCUMENT WHERE APP_UID='”.@@APPLICATION.”‘”;

$docu=executeQuery($query);

$imagen = ”;

foreach ($docu as $value)

{

$sAppDocUid=$value[‘APP_DOC_UID’];

$oAppDocument->Fields = $oAppDocument->load($sAppDocUid,1);

$info = pathinfo( $oAppDocument->getAppDocFilename() );

$ext = $info[‘extension’];

$dest=PATH_UPLOAD.@@APPLICATION;

$folderPermission=0777;

if(!is_dir($dest)){

@@exitodir= mkdir($dest,$folderPermission);

}

if(!file_exists($dest.”/”.$sAppDocUid.’_1.’.$ext)){

@@exitoFile=copy(PATH_DOCUMENT.@@APPLICATION. ‘/’ .$sAppDocUid.’_’.’1′.’.’.$ext,$dest.”/”.$sAppDocUid.’_1.’.$ext);

}

$ext = “http://”.$_SERVER[‘HTTP_HOST’].”/files/”.@@APPLICATION.”/”.$sAppDocUid.’_1.’.$ext;

$img = ‘<img src=”‘.$ext.'” width=”200px”> ‘;

$imagen .= $img;

}

@@IMAGE=$imagen;

About This Author

Customer & Partner Support Manager for Colosa Inc. and ProcessMaker.

  • The XML code is wrong. It will throw an error.

    You need to change the XML from:

    To:

    (Notice that using normal quotation marks not smart quotes and the type is “subtitle”).

  • Sorry. I see that the first comment ate my XML code. Let’s try that again.

    The XML code is wrong. It will throw an error.

    You need to change the XML from:
    <IMAGE type=“text” mode=“view” enablehtml=“1″/>
    To:
    <IMAGE type=”subtitle” mode=”view” enablehtml=”1″/>

    Notice that using normal quotation marks (not smart quotes) and type=”subtitle” (not type=”text”).