User tasks are semi-manual activities in which an IT system works together with a human actor. I.e., a human actor gets and picks a task from his task list:

The tasklist can currently be opened on the port 33029 on the Machine (IP) that runs the PROCEED Engine, e.g. http://localhost:33029/

Create a new User Task

In the process editor, a user task can be created via the wrench symbol and by selecting the correct task type.

After clicking on the new User Task, in the upper center of the process editor a blue button EDIT USER TASK FORM is appearing which needs to be clicked to get to the HTML editor.

The HTML editor

Within the simple HTML editor you can create the content and design of the User Task. To showcase a very simple example, a default page is assigned to every new User Task which will be shown if you open the editor the first time.

The main area in the middle show the content. On top there is a Menubar and on the right side is the editing panel. On the bottom right side is the OK button to go back to the process editor. There is no Cancel button since every change is saved immediately.

The Menubar

The Menubar has on the left side three symbols to change the viewport size. This is useful to develop responsive layouts and check if everything is positioned correctly for different screen sizes.

The right side displays some helpful buttons. There are tooltips if the mouse hovers over the elements. The first icon, the empty square icon, highlights all components inside the main area with a thin dotted border. This border is not shown in the final User Task form, it is just for development.

Most useful is probably the source code symbol which shows the HTML and CSS source code. You can use the popup editor to directly edit the code of the HTML page. As you can notice here, the complete HTML page is put into a HTML <form> ... </form> element.

The Editing Panel

The Editing Panel on the right has multiple tabs. The right one with the four-filled-square icon shows multiple components that can be dragged and dropped into the main area. It is subdivided into three areas Basic, Extra and Forms. For a better overview, they can be collapsed and expanded.

The hamburger icon tab displays the structure of the HTML page in a tree structure. You can use it to move components to another position or to make them invisible.

If you select a component in the main area, this component gets a thick blue border and displays some useful icons on its top right corner to move, copy or delete it. Also, the left paintbrush icon in the editor panel is selected. In multiple areas (General, Layout, Typography, Decorations, Extra) it allows you to change the layout, design and style of the element.

Furthermore, after selecting a component you can click the gear icon to open the configuration page of the component. There, you can configure every HTML attribute of the element. For example, in case of the button you can change the text here.

Use Process Variables

In the HTML you can use the process variables, so that they get displayed inside the task. Therefore, you just need to use the variable name inside the curly brackets within the HTML: {variableName}

There are some more interesting things you can do within curly brackets:

• Object handling with the dot notation: {object.property}
• Looping over arrays with the for operator: {for variable in array} <p>{variable}</p> {/for}
• Conditional displaying of information with if: {if variable}<p>Text</p>{else}<p>No variable!</p>{/if} and {if not variable}<p>No variable!</p>{/if}

The above picture shows the different possibilities used inside the HTML. Let's assume, the following process variables are given:

name = {
    firstName: 'Max',
    lastName: 'Mustermann'
}

taskArray = [
    'Get the screwdriver',
    'Assemble the Machine'
]

criticalError = false
errorInMachineA = false

Then the task renders at runtime to the following HTML representation:

Set Process Variables

You have also the possibility to let the process participant set new process variables from within a task. This is done by using input or textarea fields inside the HTML:

It is important to set the name attribute to the name of the process variable in which the value should be stored. This can be done via the HTML editor by clicking on the gear icon. Afterwards the HTML code should somehow look like this:

<div id="iv6i">
    <label class="label">
        Insert the ID of the part
        <input placeholder="123-456" name="partNumber" required class="input"/>
    </label>
</div>
<div id="i2ljx">
    <label class="label">
        <p id="id10d">Please describe what you can see:</p>
        <textarea name="descriptionText" class="textarea"></textarea>
    </label>
</div>

In its tasklist, the user fills the form fields with content. By clicking on a submit button the values get transferred to the process engine and are stored in the process variables.

Milestones

Milestones indicate the progress to reach a certain goal. You can define Milestones in the Environment View and then assign the Milestones to User Tasks via the BPMN Property Panel:

This will automatically generate a Milestone Box in the HTML. You can adapt the generated code or delete it.

If the generated code should be restored after some changes, the easiest way is to use the Milestone component of the right Editing panel.

Task Constraints

By default, every user task gets a task constraint machine.outputs == Screen. This ensures that the selected Machine has a display to show the tasklist. There are some cases where it makes sense that a Machine without a display hosts a task list, e.g. if it is a server. In this case the constraint can easily be removed via the graphical interface.

If the HTML page references an online resource, e.g. a picture hosted on the internet, a second constraint needs to be added to ensure that the executing Machine has Internet access. This is sometimes automatically recognized and added (machine.online == true).