Customizing User Task Forms using JSP Files

When a BPM process is created and deployed from the Nividous Studio, it is displayed in the Control Center > Processes > Business list. After a BPM process instance is started from the Control Center, the user task is displayed to the assignee with a default template. If the default template does not match your requirement and you want to change the layout or the look and feel of the task form, you can customize the JSP of the user task form.

You can deploy multiple versions for the same process using Nividous Studio. While deploying multiple versions, you can specify a unique name for JSP file. If you want to customize a particular version, you need to update the JSP file with the required changes. If the JSP file name is same, the customizations will affect for all versions.

Some cases to customize the JSP file of a task form are:

To change the layout or the look and feel of the task form.
To add, edit, or delete any fields in the task form without going back to Nividous Studio.
To customize properties or attributes for the task form fields.

When a BPM process is created in the Nividous Studio, a JSP file is created for each user task.

Customizing the task form using JSP requires knowledge of HTML, CSS, JavaScript, jQuery, and JSP technologies. The Administrator, Developer, or Process Owner can customize the JSP files.

Note: You can customize only the fields in the Task Form. The rest of the sections in the My Tasks module are unaffected.

Changing the layout of the Task Form:

Log in to the Control Center and navigate to My Tasks.
Open the required task. The task form is displayed.

For example, the following task form is created with two sections - Loan Details, and Customer Details. The task form is displayed with the default layout.

Log in to the system where Control Center is installed and navigate to <CC Installation Path>\server\portal\tomcat-7.0.40\webapps\advisorBPM\WEB-INF\jsp folder.
Open the required <task name>.jsp file in any editor.
If you want to change the panel layout and have the two sections side by side instead of top and bottom, then you can add the following code and save the .jsp file.

<div class="panel-heading" data-toggle="collapse" href="#LoanDetails"> Loan Details
</div>

</div>

<div class="panel panel-primary" style="float:left;width:50%;margin-top:10%;margin-left:10%;margin-bottom:10%">
<div class="panel-heading" data-toggle="collapse" href="#CustomerDetails"> Customer Details
</div>

</div>

Refresh the page. The layout of the task form is updated.

Saving Task Form Fields in a BPM Store:

After the task form is filled with the required information, click Save or Complete Task from the task form. The task form details are stored in the BPM variable store. BPM variable uses 'name' and 'id' attributes to identify the data and 'value' attribute to store the data.

Retrieving Task Form Field Values:

You can retrieve only the values stored in the 'variablesMap' collection. The variablesMap is independent for each instance.

For example, in the following Loan Origination process, you filled the task form with the required details. The loan application is due for Manager Review or VP Review to approve the loan, after viewing the customer details. When they open the task form, it retrieves customer details from the BPM variable store using the 'variablesMap' attribute. The saved customer details are displayed in the task form, and Manager or VP reviews the customer details and approves the loan.

Adding a new Form Field to the Task Form:

If you want to add a new form field to the task form, you can add fields in two ways:

Navigate to Nividous Studio, open the BPM process, and add a new field to the user task. This is a design update approach.
Open the JSP file and write a code to add a new field. This is the customization approach and often used for quick modification when you do not have access to the Studio, do not want to change the process, do not have time to go through the typical design-deploy cycle, or need a custom complex behaviour that is not supported by the default form designer.

For example, we have only two fields for Customer Details - Customer Name, and City. If you want to add a new field "Age" to the form:

Log in to the system where Control Center is installed and navigate to <CC Installation Path>\server\portal\tomcat-7.0.40\webapps\advisorBPM\WEB-INF\jsp folder.
Open the required <task name>.jsp file in any editor.
Add the following code and save the .jsp file:

Refresh the page. The new field is added to the task form.

Similarly, you can customize the JSP file to edit or delete the required task form fields.

Customizing Properties or Attributes for the Task Form Fields:

A business process flows from one task to another task. While executing the tasks, the designated user can view or edit only the fields defined in the Nividous Studio. You can define the properties of form fields in the Nividous Studio. If you want to customize the form fields to the next level, you can use the JSP file of a task form.

For example, if the loan amount is less than $10,000, it requires only auto review to approve the loan based on the applicant's credit score. The auto review form field should not be visible to the user who enters the customer details in the Task form and triggers only if it satisfies the condition.

To customize the properties or attributes of a user task form:

Log in to the system where Control Center is installed and navigate to <CC Installation Path>\server\portal\tomcat-7.0.40\webapps\advisorBPM\WEB-INF\jsp folder.
Open the required <task name>.jsp file in any editor.
Add a new form field “isAutoReview’ with hidden type and set the field value based on the loan amount.

A new property or attribute is added to the task form and triggers automatically if it satisfies the condition.

You can also use the ‘isAutoReview’ form field in the subsequent user task or condition.