User tasks are semi-manual activities in which an IT system works together with a human actor. I.e., a human actor gets or picks a task from a task list.
In PROCEED, one user task is designed in exactly one HTML page which can also
contain CSS. Therefore every user task is referencing a file with the attribute
proceed:fileName. (Every user task HTML page of one process are stored inside
the User-Tasks folder of the related process folder.) Multiple user tasks can
point to the same file, so they will reuse the same HTML page.
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).
<userTask id="Task_0pjwckr" name="Erstelle Welle" implementation="https://html.spec.whatwg.org/" proceed:fileName="User_Task_0991eu7">
<extensionElements>
<proceed:milestones>
<proceed:milestone>
<proceed:id>m1</proceed:id>
<proceed:name>Milestone 1</proceed:name>
<proceed:description>First goal achieved</proceed:description>
</proceed:milestone>
<proceed:milestone>
<proceed:id>m2</proceed:id>
<proceed:name>Milestone 2</proceed:name>
<proceed:description>Second goal achieved</proceed:description>
</proceed:milestone>
</proceed:milestones>
<proceed:processConstraints>
<proceed:hardConstraints>
<proceed:hardConstraint>
<proceed:name>machine.outputs</proceed:name>
<proceed:condition>==</proceed:condition>
<proceed:values>
<proceed:value>Screen</proceed:value>
</proceed:values>
</proceed:hardConstraint>
<proceed:hardConstraint>
<proceed:name>machine.online</proceed:name>
<proceed:condition>==</proceed:condition>
<proceed:values>
<proceed:value>true</proceed:value>
</proceed:values>
</proceed:hardConstraint>
</proceed:hardConstraints>
</proceed:processConstraints>
</extensionElements>
</userTask>Milestones
Milestones indicate the progress to reach a certain goal. They are added to the
BPMN process with <milestones>,<milestone>,<id>,<name>
and<description> elements like shown in the example above. Adding the element
in the BPMN XML is more for documentation. They actually also need to be added
to the HTML, which is responsible for setting and sending the progress back to
the Engine. If added via the GUI of PROCEEDs Management System, the milestones
are automatically added to the XML and HTML. Example of the generated HTML:
<div class="if91m milestones-wrapper">
<p>Update your Milestones:
</p>
<div>
<label>
Milestone ID: m1 | Name: mm1 | Description: mmm1
<input type="range" min="0" max="100" value="0" oninput="this.nextElementSibling.value = this.value + '%'" class="milestone-m1"/>
<output name="fulfillment_m1">0%</output>
</label>
</div>
<div>
<label>
Milestone ID: m2 | Name: mm2 | Description: mmm2
<input type="range" min="0" max="100" value="0" oninput="this.nextElementSibling.value = this.value + '%'" class="milestone-m2"/>
<output name="fulfillment_m2">0%</output>
</label>
</div>
</div>The Tasklist website of the PROCEED Engine contains listeners which register any change to any input fields, fetch the values and send them to the Engine.
User Assignment
User tasks are assigned to a resource which works on the task. This is typically a user or a role.
This is currently not yet implemented and in development.
<userTask id="Task_0pjwckr" name="Erstelle Welle" implementation="https://html.spec.whatwg.org/" proceed:fileName="User_Task_0991eu7">
<extensionElements>
<proceed:processConstraints>
<proceed:hardConstraints>
<proceed:constraintGroup id="cg-0v1gzu0" conjunction="OR">
<proceed:hardConstraint>
<proceed:name>user.role</proceed:name>
<proceed:condition>==</proceed:condition>
<proceed:values conjunction="OR">
<proceed:value>Admin</proceed:value>
</proceed:values>
</proceed:hardConstraint>
<proceed:hardConstraint>
<proceed:name>user.role</proceed:name>
<proceed:condition>==</proceed:condition>
<proceed:values conjunction="OR">
<proceed:value>Manager</proceed:value>
</proceed:values>
</proceed:hardConstraint>
<proceed:hardConstraint>
<proceed:name>user.name</proceed:name>
<proceed:condition>==</proceed:condition>
<proceed:values conjunction="OR">
<proceed:value>Max Mustermann</proceed:value>
</proceed:values>
</proceed:hardConstraint>
<proceed:hardConstraint>
<proceed:name>user.id</proceed:name>
<proceed:condition>==</proceed:condition>
<proceed:values conjunction="OR">
<proceed:value>123</proceed:value>
<proceed:value>234</proceed:value>
<proceed:value>321</proceed:value>
</proceed:values>
</proceed:hardConstraint>
</proceed:constraintGroup>
</proceed:hardConstraints>
</proceed:processConstraints>
</extensionElements>
</userTask>Access to variables
Within an User Task it is possible to retrieve and set variables of the processinstance. This requires certain changes inside the HTML Code of the User Task.
Given this BPMN-process, the User Tasks will interact with the variables by first entering a user's full name. The set variables can then be retrieved to be shown in the next User Task.
Set variables
User input can be used to set variables. Setting process variables is done like
in a normal form. You can use every usual form element. Typically this is done
with <input type="..." name="variableName" value="initialValue" ...> where
name is the name of the process variable and value the
inserted/changed/default value in the input field.
In this example, the variables firstname and surname are set by the Users
input
<form class="form">
<div id="i3jcu">
<b id="i4m1">Enter full name
</b>
</div>
<img id="inmmd" src="https://cdn.pixabay.com/photo/2015/07/02/10/40/writing-828911_1280.jpg"/>
<div id="if91m">Welcome to this User Task! Enter your full name and submit to complete this task.
</div>
<label>
First Name: <input type="text" name="firstname" required minlength="1" placeholder="First name"/>
</label>
<br/>
<label>
Surname: <input type="text" name="surname" required minlength="1" placeholder="Surname"/>
</label>
<br/>
<button type="submit" class="button">Submit</button>
</form>This is what is shown in the tasklist of the engine when encountering the User
Task Enter full name: 
Retrieve variables
Existing variables of the processInstance can be retrieved to be shown inside the User Task.
For this, the HTML Code of the User Task must make use of the Whiskers template syntax (opens in a new tab) to access and use process variables. It is easy and keeps templates readable by limiting tags to variables, statements ("for", "if", and "else"), partials, and comments. Usually you only need for accessing the desired variable.
In this example, the variables firstname and surname are shown inside this
User Task
<form class="form">
<div id="i3jcu">
<b id="i4m1">Hello, {firstname} {surname}!
</b>
</div>
<img id="inmmd" src="https://cdn.pixabay.com/photo/2015/07/02/10/40/writing-828911_1280.jpg"/>
<div id="if91m">Welcome to this User Task! Just click the Submit button to complete this task!
</div>
<button type="submit" class="button">Submit</button>
</form>This is what is shown in the tasklist of the engine when encountering the User Task Show full name:
