How to create tabs in ProcessMaker

While recently working with a client to replicate a process built in another BPM in ProcessMaker, there was a concern that was foremost on his mind.

I know ProcessMaker does not have tab control. What is your suggestion in designing this form in ProcessMaker?

The assertion that ProcessMaker does not have a tab control is accurate and tabs can be very useful in improving the user experience for forms with a large number of fields.

After a little thought, I proposed two approaches —

1. We can use collapsible sections of the form and toggle the visibility of each section with buttons placed at the top of the form using javascript.
2. Alternatively, we can create separate dynaforms and the user can use the Next step or Previous step links to move between the forms for a task.

Initial idea for approach 1 — using buttons at the top of the form.

I decided to go with the first approach and while building the process, it occurred to me that the Dynaform Designer in ProcessMaker 3 “is based on HTML5, CSS3, Bootstrap and jQuery”, and I could improve the first approach by incorporating Bootstrap’s dynamic tab functionality for a more intuitive user experience. Enough background story, let’s dive in.

For this illustration, we will be be creating a form with four tabs and each tab will display a different form. We will display the form for each tab as sub-forms in a master form that will contain the tabs.

Create a new process in ProcessMaker, let’s call it Tabs Demo Process. Next we create the four dynaforms that will serve as the sub-forms in the master form. For the simplicity, each form will have a subtitle identifying it (e.g Sub-form for Tab 1) and a label describing the content of the tab. When creating the sub-forms, ensure to change the default id for the subtitle field (subtitle0000000001) to a unique id to the subtitle (e.g. subform1_sub) so it does not conflict with the subtitle ids of the other sub-forms when we place them in the master form. Also ensure that the ids of the label in the various subforms are unique (e.g. subform1_label).

Designing the sub-form

With the four sub-forms in place, create one more dynaform that will serve as the master form. Before creating the master form, open the list of dynaforms and note the ID of each subform. We will be needing this in our master form.

Click the Show ID to display the ID of each subform

In the master form, we have a title indicating it is the master form, then we add a panel control in the next row. Set the id of the panel and click the edit button in its properties to edit the content of the panel. Paste the code below in the Content editor and save it.

Next add a subform control in the next row and in the Select a control modal, select Subform 1. Repeat the process for the remaining three subforms. Once you have all the subforms added to the master form, edit the dynaform JavaScript and paste the following code. You will need to edit the IDs in the code to match the IDs of your subforms (remember we noted them down earlier).

Save the changes and preview the form. You should be presented with a lovely tabbed navigation as shown in the video below.

That’s all folks! I hope this helps. You can download the sample process here https://drive.google.com/file/d/1sGMl5WiOX3FkkUL5lbAE-_8lvegY7V-A/view?usp=sharing

PS: Interested in learning more about ProcessMaker and how it can help you automate your business processes (or know someone who is), check out my work-in-progress book on Leanpub — A Beginner’s Guide to Business Process Automation with ProcessMaker 3.1