Prototyping a Workflow-Driven Application in a Day – Part 3

DZone 's Guide to

Prototyping a Workflow-Driven Application in a Day – Part 3

· Java Zone ·
Free Resource

In the first part of this tutorial, we defined workflow participants involved in the LeaveApproval Process. By completing the second part of this tutorial, we have already deployed the Leave Application Process into Joget Workflow. It's a complete process design, but the workflow engine has yet to know about the following information for workflow execution:

  • Who do we mean by Applicant and Approver?
  • How should the user interact with this process?
  • What are the data to be captured in leave application submission?
  • How is the email notification sent?

Participant Mapping

Login to the Workflow Management Console, and go to Design > Update Existing Process. Select "Leave Approval Process", and you will be presented with the Update Process page. There are 3 tabs of process configuration:

  • Participant Mapping - mapping of process participant to user, user group, organization chart entity, or other advanced options.
  • Activity Mapping - mapping of activity to data form, and tool to application plugin
  • Workflow Variables - listing of workflow variables defined in this process

In the Participant Mapping tab, let's configure mapping for Approver. In the row of participant labeled "Approver (package level)", click the "Add / Edit Mapping" button. Then, in the popup window, select "Map to User", select "approver" and submit the selection. If the "approver" user doesn't exist, create this user account from Setup Users.

Participant Mapping

Figure 3.1: Participant Mapping

What have we just done? We have configured the participant mapping for Approver, map it to a user with username of "approver".

We don't do anything for the participant mapping of "Application". This means that, all Joget Workflow users are allowed to run this process to submit leave application.

Set Browser to Allow Popup from localhost

Most of the modern web browser is having a default popup blocker activated. However, the Form Builder in Joget Workflow needs popup to be allowed. For better user experience, please create an exception to allow popup from localhost (or the host that Joget Workflow is running).

Create Leave Application Form

Now, let's click to open the Activity Mapping tab, which has a list of activities defined in workflow design.

When an applicant performs the "Submit Leave Application" activity, what do we expect? A form submission of leave application, right?

Click on the "Add/Edit Form" button for "Submit Leave Application" activity. In the popup screen, click the "Create New Form" button, and we will be prompted with the following fields:

  • Form ID - unique identifier; so don't use space character
  • Form Name - descriptive name
  • Table Name - database table name; so use only valid database table naming
  • Category - for categorization purpose

As shown in Figure 3.2, create Leave Application Form with the following details:

  • Form ID - hr_leave_001
  • Form Name - Leave Application Form
  • Table Name - leave_application
  • Add New Category
    • Category ID: hr_leave
    • Name: HR Leave

Create Form

Figure 3.2: Create Form

Click on "Save" (in the Add New Category section) to save the category, and "Save" again to create this form.

When the form is created, and if popup is allowed in your web browser, Form Builder will be launched in a new browser window/tab, allowing user-customizable form design.

  1. Re-label the form title to "Leave Application Form" and fieldset legend to "Application Details.
  2. From the Elements panel on the right, click Date Picker to add date selection field into the form. Re-label the name of this date picker field to "Start Date", and you may clear off the description or type in a descriptive legend if you wish to.
  3. As shown in Figure 3.3, for the "Start Date" field, click the Advanced Properties and change its name to a meaningful one - startDate. This name will be used as the field name in HTML, as well as column name in the database table. So a meaningful name is important.
  4. Repeat the same steps (2 and 3) for another 2 fields - End Date (date picker), Reason (text area). Remember that you are advised to change the name of each field in its Advanced Properties.

Form Builder

Figure 3.3: Form Builder

Leave Application Form

Figure 3.4: Leave Application Form

When you're done, click the "Save" button to save this form design. You may also preview it. Close the Form Builder window/tab after saving the form.

Now, in the Update Process page for "Leave Application Process", we should have "Leave Application Form" attached to "Submit Leave Application" activity.

Create Leave Approval Form

Next, for the "Leave Approval" activity in Activity Mapping, click the "Add/Edit Form" button to create a new form with the following details:

  • Form ID - hr_leave_002
  • Form Name - Leave Approval Form
  • Table Name - leave_application
  • Category - HR Leave

Please note that, we're using the same table name for this approval form as well. By recommended practice, we use the same table name for all forms related to the same process, so that all columns related to the same process will be kept in the same database table.

In this approval form, we're going to insert the Leave Application Form, so that the approver knows the application details submitted.

  1. Re-label the form title to "Leave Approval Form", and the fieldset legend to "Submitted Application"
  2. From the Elements panel on the right, click Sub Form, and select "Leave Application Form" from the form list. Click "Submit" to insert the "Leave Application Form" into "Leave Approval Form" as sub form.
  3. On the sub form element, as shown in Figure 3.5, click the "Click to disable/enable this row" icon, to disable this element and make it a read-only field.
  4. From the Elements panel, add a new Fieldset into the form, and label the legend as "Approval".
  5. From the Elements panel, add Radio Button into the form, and label it as "Leave Approval". Click the star icon to set this field as required/compulsory field.
  6. Click to edit the radio button option, set value as "approved", and label it as "Yes, approved", as shown in Figure 3.6. Please take note of the lower case string of the value; this is to match the condition expression defined in Workflow Designer.
  7. Click to add another radio button option, set the value as "rejected", and label it as "No, rejected".
  8. Open the Advanced Properties for "Leave Approval" radio button, and as shown in Figure 3.7:
    • Set its name as "leaveApproval"
    • Set the workflow variable name as "status"
  9. Save the form design, and close the Form Builder window/tab when you're done.

Sub Form

Figure 3.5: Sub Form

Setting Value and Label of a Radio Button Option

Figure 3.6: Setting Value and Label of a Radio Button Option

Associate Radio Button to a Workflow Variable

Figure 3.7: Associate Radio Button to a Workflow Variable

In the "Leave Approval Form" that we have just created, we associate the "Leave Approval" radio button to the "status" workflow variable (declared in Workflow Designer, as discussed in the second part of this tutorial). This means, the value of the selected radio button option will be set as the value of "status" workflow variable, when the form is submitted.

Map Tool to Plugin

As shown in the Activity Mapping in Update Process page, we have already attached data form (designed using Form Builder) to "Submit Leave Application" and "Leave Approval" activities.

The other 2 email notifications, which are defined as Tool in Workflow Designer, are yet to be mapped.

For the tool labeled "Email Notification of Approved Application", click the "Add/Edit Plugin" button, and we will be presented with a list of application plugins available in Joget Workflow. For this tutorial, let's choose Email Plugin.

Then, we will be presented with Plugin Configuration page for the selected Email Plugin, to configure SMTP host, sender's and recipient's details, and the email message. For the "Form Data Table", you may use "leave_application" (same as the forms created for this process). If you have a valid SMTP host to use for this process, then you may fill up the plugin configurations; else, you may leave them blank but you will not receive email notification when the process is executed.

Again, for the tool labeled "Email Notification of Rejected Application", click the "Add/Edit Plugin" button, and select Email Plugin as well.

Summary of What We Have Done

As a summary to refresh our mind, we have designed the workflow of Leave Application Process in the 1st and 2nd part of this tutorial using Workflow Designer, and deployed it to workflow engine.

Then, in this article, the 3rd part of this tutorial, we have configured the participant and activity mappings. Please make sure that you have the participant mapping as shown in Figure 3.8, and activity mapping as shown in Figure 3.9

Participant Mapping

Figure 3.8: Participant Mapping

Activity Mapping

Figure 3.9: Activity Mapping

By now, our Leave Application Process is configured, and ready to be executed!

Let's see how we can run this process, in the next part (the last too) of this tutorial.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}