In this tutorial, you will learn how to build complex user interfaces for human steps.

Table of contents:

1. Assumptions
2. Creating dummy process
3. Creating task's layout
4. Adding dynamical behaviour with scripting

Assumptions

We assume that you have previously installed Aperte Workflow with Aperte Modeler and have deployed those bundles:

• base-widgets *
• scripting
• groovy-script-processor

*Please note that scripting will be supported since version 1.1. Until it's officially released, in order to use scripting you have to build base-widgets from current development version (available in branch master).

Creating dummy process

At first, create in Aperte Modeler a dummy process with only one step, following those steps:

1. Sign in to Aperte Modeler
2. Click New -> Business Process Diagram (...) - an empty design will be opened.
3. Click Save and enter Human Task Tutorial in the Title field. After saving, click on Attributes bar on the right side of editor and set process properties as on the picture:
4. Drag and drop start event, task and end event on white space. Now name and connect them, as on the picture below.
5. Save the design - your dummy process is ready.

Creating task's layout

Now we will edit step layout with Step Editor.

1. Open it by clicking on the task and later on Aperte Workflow logo, which will apear below.
   

2. Click on Assignment tab and set Assignee field to value #{initiator}:

3. Drag Process Data Block from available widgets list and drop below Step in the Step Structure tree. Click on the new node to edit its attributes.

4. Switch to Permissions tab in the ProcessDataBlock widget.

5. For all the permissions select the .* role, granting all the users ability to interact with the widget.

6. In the Hierarchy editor, drag and drop elements to widget hierarchy tree to create structure as on the picture below.

7. Edit each properties as shown on pictures below:

8. Click on Widget preview tab - you should see something like on the picture:

Adding dynamical behaviour with scripting

Now you have a static form which looks nice, but you may want to add some dynamic behaviour, for example hiding the Return date if user selected One way option. We can achieve this using scripting supported by Aperte Workflow. In this tutorial we'll use Groovy, but virtually any JSR223 copliant language can be used (currently plugins for Groovy and Drools are available).

1. In order to refer to the widget's elements, we have to name them by setting the Id property. We want also the script to be run on One way? option group selection change, so set property Run script on change to true (checked). Update elements properties as on the pictures:

2. Select Groovy script processor in Script Engine combo box.

3. Script source code to be executed can be provided in two ways: by specifying URL to external resource containing that source, or entering it in Script source code field. Here we will use the second option. Copy code below into that field, and click Apply.

   if("TRUE".equals(tripType.getValue()))
       returnDate.setVisible(false);
   if("FALSE".equals(tripType.getValue()))
       returnDate.setVisible(true);
   

   

4. To test it, click Widget preview tab in Step Editor or save it and deploy the process - scripting works in both cases.

Preview: Deployed process: