Upload all your images to the
Public Files of a process.
Then create the following DynaForm:
SelectPicFormInDesigner.png (43.48 KiB) Viewed 4631 times
This DynaForm has the following 6 fields:
[*]The Image field with the ID "selectedImage" displays the image that user has selected.
[*]The "Select Button" (ID: selectImageBtn) is used to display a panel of images where the user can select one.
[*]The panel with the ID "imagesPanels", which is hidden by default, holds a table of images.
[*]The hidden field with the ID "htmlTable" holds the contents of the table with images from the Public Files directory, which is set by a prior trigger.
[*]A second hidden field with the ID "selectImageUrl" which holds the URL of the selected image.
[*]A submit button.
When the user clicks on the "Select Images" button, the "imagesPanels" is displayed for the user. When the user clicks on image inside the panel, it will then close and the image will be displayed
Then, add the following JavaScript code to the Dynaform:
Code: Select all//execute when DynaForm loads:
var tableHtml = $("#htmlTable").getValue();
if (tableHtml != '') {
$("#imagesPanel").html(tableHtml);
}
$("#imagesPanel").hide();
if ($("selectedImageUrl").getValue() != '') {
$("selectedImage").find("img").prop("src", $("selectedImageUrl").getValue() );
}
//execute when user clicks on "Select Image" button:
$("#selectImageBtn").find("button").click(function() {
$("#imagesPanel").show();
$("#imagesPanel").focus();
});
//execute when user clicks on image inside the "imagesPanel":
$("#imagesPanel img").click(function() {
var imageUrl = $(this).prop("src");
$("#selectedImage").find("img").prop("src", imageUrl);
$("selectedImageUrl").setValue(imageUrl);
$("#imagesPanel").hide();
});
Then, create the following trigger and set it execute before the DynaForm:
Code: Select all//Set to the ID of process or @@PROCESS if the image files are
//in the Public Files of the same process:
$processId = @@PROCESS;
$aAllowedExt = array('jpg', 'jpeg', 'png', 'gif');
$imgWidth = "250px"; //set to width of image
$columnsPerRow = 2; //set to the number of images per row
$g = new G();
$url = ($g->is_https() ? 'https://' : 'http://') . $_SERVER['SERVER_NAME'].
($_SERVER['SERVER_PORT'] == 80 ? '' : ':'.$_SERVER['SERVER_PORT']).
'/sys'.@@SYS_SYS.'/'.@@SYS_LANG.'/'.@@SYS_SKIN.'/'.$processId.'/';
$path = PATH_DATA_PUBLIC . $processId . PATH_SEP;
$d = dir($path) or die("Bad path");
$aImageFiles = array();
while (false !== ($entry = $d->read())) {
$ext = pathinfo($entry, PATHINFO_EXTENSION);
if (!empty($ext) and in_array($ext, $aAllowedExt)) {
$aImageFiles[] = "<img src=\"$url$entry\" width=\"$imgWidth\"><br />$entry";
}
}
$d->close();
@@htmlTable = '<table><tbody><tr>';
for ($i = 0; $i < count($aImageFiles); $i++) {
$cell = '<td>'.$aImageFiles[$i].'</td>';
if ($i != 0 and $i % $columnsPerRow == 0) {
$cell = '</tr><tr>' . $cell;
}
@@htmlTable .= $cell;
}
@@htmlTable .= "</tr></tbody></table>";
This code looks up all the image files in the Public Files directory. It creates an HTML table whose cells contain images of those files and places that table in the @@htmlTable variable which is passed to a hidden field in the DynaForm.
When a case is run, the user can select one of the images in the panel:
SelectPicForm.png (73.68 KiB) Viewed 4631 times
If this same DynaForm is displayed in a subsequent task, the selected image will be redisplayed in the form.
Here is the sample process which can be downloaded and imported:
(182.45 KiB) Downloaded 255 times
- By Qurdwerny