4 tips for designing Processmaker dynaforms

Processmaker offers a very user friendly interface for process designers to create forms based on the process’s requirements. The dynaform allows you drag and drop html elements on the form as desired. It also provides a JavaScript panel where you can write code to manipulate the Html.

Following are some tips for dynaform design that aid ease of development and long term process maintainability.

Each task should have its own form.

It is possible for multiple tasks in a process to use the same sub-form, this is useful when the content of a form in multiple tasks are exactly the same. However, giving each task it’s own form is preferable because it makes the process easier to maintain in the long-run. As time goes by a process is likely to develop new requirements and multiple tasks sharing the same form will make it difficult to accommodate the smallest of changes particular to one of the tasks.

Favor sub-form driven design.

Following the previous point of giving each task its own form, a problem quickly arises. Any change across the process will mean the designer has to update the form for each task. This is very tedious especially for a process with many tasks. To solve this problem, you divide the form into components, and make each component a sub-form. Basically a parent form will have multiple subforms. Each parent form that require similar contents will use the same subforms. For example, Parent form A requires a User details component and Complaints details component. Parent form B also requires User details component and Complaint details component. You design User details form and Complaint details form and import them into both parent forms as sub-forms.

Therefore if in the future the process requires a small change to the User details, the change is made in the sub-form and it is effected in all parent forms.

Write all your JavaScript in the Parent form.

Having multiple subforms in a parent form, it can become tempting to write code within the JavaScript panel of the subform. This can often lead to unpredictable results and will make the process difficult for you and other developers to maintain in the long run.

Extract lengthy JavaScript code into external library.

Having to write all the code in the parent form can quickly lead to a very long JavaScript file. Maintaining so many lines of JavaScript within the dynaform JS panel -which doesnt look like it was designed to handle so much code, is a somewhat ugly job, even more so for future developers tasked with maintaining the process. Importing long JavaScript code as an external library is a better approach.