Adding a Custom External Library and Creating an Image/Pdf Viewer in Processmaker.

Processmaker is a business process management software that’s very customizable to fit individual needs of the many businesses that make use of it.

In this article, I’ll be explaining how to add a “View” option to image and pdf files uploaded into the dynaform. I’ll be assuming you have basic knowledge of designing processes on Processmaker. If you’re totally new to process maker, this book is a great place to get started quickly.

Usually a process requires that an external file or document be uploaded by the initiator of the process, and when the form is submitted for review, these said documents will also need to be reviewed by the reviewer before action can be taken. Default behavior of processmaker provides functionality for the document to be downloaded by the user.

This process of downloading and viewing can seem unnecessary if the reviewer just needs to look through the document for visual confirmation and has no need for keeping the document.

Ill be using this simple process to demonstrate how adding a viewer can be done.

Process Map for Expense Report Process.

The process is initiated with this form which contains a file-upload control for the file upload. The user fills the details required and uploads the file then submits the form for review.

Dynaform for Process Initiation.

The dynaform for the reviewer is similar to this. Ensure that the file upload controls on both forms share the same variable name. By default, Processmaker provides functionality for downloading the file uploaded.

Dynaform for Process Review.

Create the “View file” functionality

To add a ‘View file’ functionality, first, we need to create an external Javascript file which we can import into our process by including the directory to our file in the external libs property.

We do this following the following steps;

1. Go to your process maker installation folder and navigate to the workflow/public_html directory.
2. Create a new folder in this directory called Viewers
3. In your editor create a new JavaScript file called viewers.js
4. Copy the following bit of code into this file

5. Include the directory Viewers/viewers.js in the dynaform’s External libs property

6. Call the function in the dynaform javascript editor like so;

7. Run a case and you should see a view button now available. Once clicked, it opens up the attachment in a new window.

Dynaform with the view-form functionality.

I hope you find this useful. Please drop questions, corrections or comments in the comment section.