BPM

Viamedici Software GmbH, 76275 Ettlingen, 04.02.2021

 Copyright

Copyright
The information contained in these documents, including any URLs and other references to
websites on the Internet, is subject to change without prior notice. Any companies, organisations,
products, persons and events used in the examples are purely fictitious. Any similarity to actual
companies, organisations, products, persons and events is coincidental. Any duplication or transfer
of these documents, in whole or in part, irrespective of the intended purpose or means employed,
be they electronic or mechanical, is prohibited without the prior explicit written approval of
Viamedici Software GmbH, 76275 Ettlingen, Germany.
©2021 Viamedici Software GmbH. All rights reserved.
viaCONTENT®, viaPUBLISH®, viaCONNECT®, Viamedici EPIM®, Viamedici ECOM®, Viamedici
ECAT® and Viamedici® are registered trademarks of Viamedici Software GmbH. Adobe,
FrameMaker and InDesign are registered trademarks of Adobe Systems Inc. Macintosh is a
trademark of Apple Inc., registered in the United States of America and other countries. Microsoft,
Windows and Windows NT are trademarks or registered trademarks of Microsoft Corp. in the
United States of America and other countries. Oracle is a registered trademark of Oracle Corp.,
Redwood City, USA. QuarkXPress is a registered trademark of Quark Inc., Denver, USA. Other
product and company names mentioned in this document may be protected company marks or
trademarks of their respective owners.

BPM - 2/32
 Typographic Conventions

1 Typographic Conventions

BPM - 3/32
 Table of Contents

2 Table of Contents

1 Typographic Conventions...................................................................................................... 3

2 Table of Contents .................................................................................................................. 4

3 List of Images ........................................................................................................................ 5

4 About this Documentation ..................................................................................................... 6

5 Camunda BPM ...................................................................................................................... 7

5.1 HTML-Snippets ..................................................................................................................... 8

5.1.1 Example: User Names and Comments ................................................................................11

5.1.2 Example: User Selection ..................................................................................................... 12

5.1.3 Examples: Decisions ........................................................................................................... 14

5.1.4 Example: Deadline .............................................................................................................. 16

5.1.5 Example: Prices and Numbers of Pieces ............................................................................ 17

5.2 Create Task ......................................................................................................................... 18

5.3 Delete Processes ................................................................................................................ 21

5.4 Email Notifications............................................................................................................... 23

5.4.1 Language-dependent Email Notifications............................................................................ 24

5.4.2 Configuration Email Server and LDAP Server .................................................................... 25

5.4.3 Defining Reminder by Email................................................................................................ 27

5.4.4 Define Escalation by Email.................................................................................................. 30

BPM - 4/32
 List of Images

3 List of Images

1 Camunda BPM, schematic representation.................................................................................. 7

BPM - 5/32
 About this Documentation

4 About this Documentation

In the following, you will find the most important information concerning this topic.
We always want to improve the content. If you cannot find the information you are looking for,
please write an e-mail with your feedback to [email protected].
You can help us by answering the following questions:
• What information are you missing?
• Which articles could be improved?
• Did you find an error?

BPM - 6 / 32
5 Camunda BPM
Camunda BPM is a workflow management system with which business processes and workflows
can be modelled and documented.
Properties:
• Based on the BPMN 2.0 standard.
• Support of almost all BMPN functions.
• Support of open source editors.
• Based on the same technology stack as Viamedici EPIM.
• Operation via Web Service API.
• Integration of third-party software systems.
• LDAP integration.

1 Camunda BPM, schematic representation

BPM - 7/32
5.1 HTML-Snippets

 Notes:
• The HTML snippets must be stored in the corresponding directory for tasks.
For example, for loan-app-0.0.1-SNAPSHOT, the form files are saved in \
\<SERVER-NAME>\d$\VMPROGRAMS\camunda-bpm-
tomcat-7.6.0\server\apache-tomcat-8.0.24\webapps\loan-app-0.0.1-
SNAPSHOT\forms.
• The following prototype can be used to quickly validate the HTML snippets
and visualize the possibilities: http://192.168.1.205/viaMEDICI/jsp/js/extjs/ext/
examples/protos/camundaForms/camundaForms.html.

The tasks in Viamedici EPIM are defined using HTML snippets. The basic structure is explained
below:
The HTML element <form> contains the HTML attributes class and id. For the HTML attribute
class the attribute value form-snippet must be used. For the HTML attribute id, the file name of
the HTML snippet must be used as the attribute value:

1 <form class="form-snippet" id="simpledecision" name="simpledecision">

The first HTML element <div> contains the HTML attribute class. For the HTML attribute class,
the attribute value form-group must be used:

1 <div class="form-group">

The HTML element <label> contains the HTML attributes class and for. For the HTML attribute
class the attribute value form-control must be used. For the HTML attribute for the label name
must be used.
Instead of writing text in the HTML snippets, you can use label keys that can be defined as follows:

1 <label class="form-control-label" for="publish">{form-name.label-name}</

label>

For example:

1 <label class="form-control-label" for="publish">{simpledecision.publish}</

label>

The key-value pairs must be entered in the language-dependent properties files, for example in
the viaResources_eng_ENG_custom.properties file, as follows:

Cam.form-name.label-name = label-value

For example:

Cam.simpledecision.publish = Publish

BPM - 8/32
The second HTML element <div> contains the HTML attribute class.  For the HTML attribute 
class, the attribute value form-control-body must be used:

1 <div class="form-control-body">

The HTML elements <input> oder <select> contain the following HTML attributes, which must be
defined accordingly:
• class
• id
• cam-variable-name
• cam-variable-type

1 <input class="form-control" id="publish" cam-variable-name="PUBLISH" cam-

variable-type="Boolean" name="publish" type="checkbox">

1 <input class="form-control" id="publish" cam-variable-name="PUBLISH" cam-

variable-type="Boolean" name="publish" type="checkbox">

1 <select class="form-control" id="publish" cam-variable-name="PUBLISH" cam-

variable-type="String" name="publish" type="radio">

BPM - 9/32
The complete example:

1 <form class="form-snippet" id="simpledecision" name="simpledecision"> <p

class="form-message main-instruction">How do you want to publish?</p>
<div class="form-group"> <label class="form-control-label" for="
publish">{simpledecision.publish}</label> <div class="form-
control-body"> <input class="form-control" id="publish
" cam-variable-name="PUBLISH" cam-variable-type="Boolean" name="publish"
type="checkbox"> <label class="form-control-label" for="
online">Online</label> </div>   <div class="form-
control-body"> <input class="form-control" id="print"
cam-variable-name="PRINT" cam-variable-type="Boolean" name="print" type="c
heckbox"> <label class="form-control-label" for="print"
boxlabel="">Print</label> </div> </div> <div
class="form-group">   <label class="form-control-label" for="publ
ish">Publish to</label> <div class="form-control-body">
<select class="form-control" id="publish" cam-variable-name="PUBLISH" cam-
variable-type="String" name="publish" type="radio" horizontal="">
<option value="online">Online</option> <option value="
print">Print</option> <option value="printtemplate"
disabled="">Print template PDF/X-3</option> </select>
</div> </div> </form>

To add a custom class to an HTML element, use the 
customClass="test-custom-class"
.
For a correct display of the image, the image must be placed in the source folder of the current
look (example for GRAPE look: /viaMEDICI/jsp/css/GRAPE/img/...).
To add custom local images use:

1 <div class="form-group"> <div class="form-control-body"> <input

type="text" id="test_custom_image" class="form-control" customClass="test
-custom-class" customImage="/viaMEDICI/jsp/css/GRAPE/img/epobs/previews/
product.gif"/> </div> </div>

To add the Camunda variable custom image use:  

1 <div class="form-group"> <div class="form-control-body"> <input

type="text" id="my_camunda_img_src" class="form-control" customImage=""
cam-variable-name="my_camunda_img_src" cam-variable-type="String"/> </div>
</div>

Further examples are shown below:

• You can define user names and comments (see page 11) by using input fields.
• You can define a user selection (see page 12) by using lists.
• You can define decisions (see page 14) by using checkboxes and radio buttons.
• You can define deadlines (see page 16) by using dates and times.
• You can define prices and quantities (see page 17) by using sliders.

BPM - 10/32
5.1.1 Example: User Names and Comments
The following example shows how to use input fields.
Input fields can be defined as required fields:

1 <input required="">

The minimum length and the maximum length of the text can be defined:

1 <input minlength="3" maxlength="12">

User names can be predefined:

1 <input value="Nick">

You can define placeholders:

1 <input placeholder="your nickname">

The whole example:

1 <form class="form-snippet" id="simple-decision" name="simpledecision">

2 <p class="form-message main-instruction">Enter a Username.</p>
3 <p class="form-message supplemental-instruction">The user name is for
the login.</p>
4 <div class="form-group">
5 <label class="form-control-label" for="nickname">Username</
label>
6 <div class="form-control-body">
7 <input class="form-control" id="nickname" cam-
variable-name="NICKNAME" cam-variable-type="String" name="nickname"
minlength="3" maxlength="12" value="Nick" placeholder="your nickname" type="
text">
8 </div>
9 </div>
10 <div class="form-group">
11 <label class="form-control-label" for="comments">Comment</label>
12 <div class="form-control-body">
13 <textarea class="form-control" id="comments" cam-variable-
name="COMMENTS" cam-variable-type="String"></textarea>
14 </div>
15 </div>
16 </form>

BPM - 11/32
5.1.2 Example: User Selection
The following example shows different lists in which users can be selected.
The size of the lists can be defined. If the size is not defined, a drop-down list is automatically
used:

1 <select class= size="3">

The selection of several list points can be allowed and defined as required:

1 <select class= multiple required>

With the HTML attribute boxselect the representation of the user selection can be changed. This
representation is commonly used for adding mail adresses or users with displaying deletable tags.

1 <select boxselect="true" multiple required size="3">

Users can be preselected:

1 <option value="user3" selected="selected">System Administrator</option

BPM - 12/32
The whole example:

1 <form class="form-snippet" id="simple-responsible" name="simpleresponsible

">
2 <p class="form-message main-instruction">Who is participating?</p>
3 <p class="form-message supplemental-instruction">Select participants,
people to be informed and a responsible user.</p>
4 <div class="form-group">
5 <label class="form-control-label" for="participants">Participants<
/label>
6 <div class="form-control-body">
7 <select class="form-control" id="participants" cam-
variable-name="PARTICIPANTS" cam-variable-type="String" name="participants
" size="3">
8 <option value="user1">Editor</option>
9 <option value="user2">Translator</option>
10 <option value="user3">Product Manager</option>
11 </select>
12 </div>
13 <label class="form-control-label" for="mailTo">To inform</label>
14 <div class="form-control-body">
15 <select class="form-control" id="mailTo" cam-variable-
name="MAIL_TO" cam-variable-type="String" name="mailTo" boxselect="true"
multiple required size="3">
16 <option value="user1">Product Manager</option>
17 <option value="user2">Project Manager</option>
18 <option value="user3" selected="selected">System
Administrator</option>
19 </select>
20 </div>
21 <label class="form-control-label" for="responsible">Responsible</
label>
22 <div class="form-control-body">
23 <select class="form-control" id="responsible" cam-
variable-name="RESPONSIBLE" cam-variable-type="String" name="responsible">
24 <option value="user1">Product Manager</option>
25 <option value="user2">Project Manager</option>
26 <option value="user3" selected="selected">Chief
Executive Officer</option>
27 </select>
28 </div>
29 </div>
30 </form>

BPM - 13/32
5.1.3 Examples: Decisions
The following example shows the use of checkboxes:

1 <input type="checkbox">

The whole example:

1 <form class="form-snippet" id="simple-decision" name="simpledecision">

2 <p class="form-message main-instruction">How do you want to publish?</
p>
3 <div class="form-group">
4 <label class="form-control-label" for="publish">Publish to</
label>
5 <div class="form-control-body">
6 <input class="form-control" id="publish" cam-variable-
name="PUBLISH" cam-variable-type="Boolean" name="Online" type="checkbox">
7 <label class="form-control-label" for="online">Online<
/label>
8 </div>
9 <div class="form-control-body">
10 <input class="form-control" id="print" cam-variable-
name="PRINT" cam-variable-type="Boolean" name="print" type="checkbox">
11 <label class="form-control-label" for="print" boxlabel="
">Print</label>
12 </div>
13 </div>
14 </form>

The following example shows the use of radio buttons:

1 <select type="radio">

By default, checkboxes and radio buttons are sorted one above another. Radio buttons can also be
sorted next to one another:

1 <select horizontal="">

BPM - 14/32
The whole example:

1 <form class="form-snippet" id="simple-decision" name="simpledecision">

2 <p class="form-message main-instruction">How do you want to publish?</
p>
3 <div class="form-group">
4 <label class="form-control-label" for="publish">Publish to</
label>
5 <div class="form-control-body">
6 <select class="form-control" id="publish" cam-
variable-name="PUBLISH" cam-variable-type="String" name="publish" type="ra
dio" horizontal="">
7 <option value="online">Online</option>
8 <option value="print">Print</option>
9 <option value="printtemplate" disabled="">Print
template PDF/X-3</option>
10 </select>
11 </div>
12 </div>
13 </form>

BPM - 15/32
5.1.4 Example: Deadline
The following example shows how a date and time can be selected.
Date specifications can be predefined:

1 <input value="09.05.2017">

Step widths can be defined. A time of 30 minutes is defined for the time:

1 <input increment="30">

The whole example:

1 <form class="form-snippet" id="simple-deadline" name="simpledeadline">

2 <p class="form-message main-instruction">When should it be finished?</
p>
3 <div class="form-group">
4 <label class="form-control-label" for="deadline">Date</label>
5 <div class="form-control-body">
6 <input class="form-control" id="deadline" cam-
variable-name="DEADLINE" cam-variable-type="Date" name="deadline" required
value="09.05.2017" placeholder="your deadline" type="date">
7 </div>
8 <label class="form-control-label" for="deadline-time">Time</
label>
9 <div class="form-control-body">
10 <input class="form-control" id="deadline-time" cam-
variable-name="DEADLINE_TIME" cam-variable-type="String" name="deadline-
time" increment="30" type="time">
11 </div>
12 </div>
13 </form>

BPM - 16/32
5.1.5 Example: Prices and Numbers of Pieces
The following example shows how prices and numbers of pieces can be defined.
Values can be predefined:

1 <input value="50">

The minimum number of pieces and the maximum number of pieces can be defined:

1 <input min="5" max="20">

The step size for the number of pieces can be defined:

1 <input step="1">

The whole example:

1 <form class="form-snippet" id="simple-price" name="simpleprice">

2 <div class="form-group">
3 <label class="form-control-label" for="desired-price">Desired
price</label>
4 <div class="form-control-body">
5 <input class="form-control" id="desired-price" cam-
variable-name="DESIRED_PRICE" cam-variable-type="Long" name="desired-
price" value="50" type="range">
6 </div>
7 <label class="form-control-label" for="max-price">Maximum
Price</label>
8 <div class="form-control-body">
9 <input class="form-control" id="max-price" cam-
variable-name="MAXIMUM_PRICE" cam-variable-type="Long" name="max-price"
required value="150" type="range">
10 </div>
11 </div>
12 <div class="form-group">
13 <label class="form-control-label" for="howmany">Number of
pieces</label>
14 <div>
15 <input class="form-control" id="howmany" cam-variable-
name="HOWMANY" cam-variable-type="Double" required min="5" max="20">
16 </div>
17 </div>
18 </form>

BPM - 17/32
5.2 Create Task
The form key must always be entered as follows: embedded: app: <folder-name>/<file-
name>.html. The embedded:app: prefix is used because it is an embedded HTML form. External
forms can also be used. For <folder-name>, the name of the folder where the HTML snippet is
stored must be used. Instead of <file-name>, the name of the HTML file must be used.
1. Download1 the Camunda Modeler.
2. Unzip the Camunda Modeler.
3. Run camunda-modeler.exe.

1 https://camunda.org/download/modeler/

BPM - 18/32
4. Open a BPMN diagram.
5. Select a task
6. Click Change Type.

BPM - 19/32
 7. Select User Task.
8. Click Properties Panel.
9. Click the Forms tab.
10. Enter the form key, for example embedded:app:forms/simple-decision.html.

BPM - 20/32
5.3 Delete Processes
1. Download the file DeploymentPackage.7z from ../Productrelease/tools/BPMN/
Camunda/Task/DeleteDeployments/runnable.
2. Unpack the file DeleteDeployments.war into the Camunda root directory under ..
\server\apache-tomcat-x.x.xx\webapps.

3. Run the file start-cmunda.bat in the Camunda directory to start the server.

4. In the Camunda overview, click Process for delete deployments to create a task
called Do Delete.

BPM - 21/32
5. Click Claim to take over the task.

6. Select a process to delete all versions of the process and all associated files from
the Tomcat server.

7. Select All processes to delete all processes except the process Process for delete
deployments process.

BPM - 22/32
5.4 Email Notifications
You can define two different email notifications:
• An automatic reminder by email after a certain period of time to the user who is
editing the task.
• An automatic escalation by email after a certain period of time to the user
responsible for the process.
Further information on timer events can also be found in the Camunda documentation: https://
docs.camunda.org/manual/7.7/reference/bpmn20/events/timer-events/#defining-a-timer.

BPM - 23/32
5.4.1 Language-dependent Email Notifications
You can use properties files to create language-dependent email notifications. By default, the files
email_de_DE.properties and email_en_GB.properties are available. You can define additional
language-dependent properties files. Each listener uses its own email format and keys and values.
The values from the email. properties file are used if no language-dependent email notifications
can be used. You can add Camunda variables and the listener will replace the Camunda values
accordingly.
The following table shows the keys and example values of the file email_en_GB.properties.

Key Value

UserTask_1_email_subject Subject en_GB {vm_process_deadline}

UserTask_1_email_body Body en_GB {vm_process_object_epim_id}

{vm_process_responsible_role}

UserTask_1_reminder_email_subject Subject en_GB {vm_process_deadline}

UserTask_1_reminder_email_body Body en_GB

{ vm_process_object_epob_type}
{ vm_process_object_epim_id}

UserTask_1_escalation_email_subject Subject en_GB escalation email

UserTask_1_escalation_email_body Body en_GB of the escalation email

{vm_process_object_epim_id}

BPM - 24/32
5.4.2 Configuration Email Server and LDAP Server
The settings for the email server configuration and LDAP server configuration can be found in the
file viamediciConfig.properties under ../webapps/VMConfig.
The following table shows the keys and example values of the file viamediciConfig.properties
for the email server configuration.

Key Value

host 192.168.100.11

port 25

from [email protected]

The following table shows the keys and example values of the file viamediciConfig.properties
for the LDAP server configuration.

Key Value

LDAPServer 192.168.1.205

LDAPPort 10389

LDAPBaseDN dc=viamedici,dc=com

LDAPBindDN uid=admin,ou=system

LDAPBindPW secret

LDAPSsl 0

LDAPAccountOC person

LDAPAccountUA displayName

LDAPAccountLocale preferredLanguage

2 mailto:[email protected]

BPM - 25/32
The language is adopted from the LDAP settings and used for the selection of language-
dependent properties files. In the base DN, the attribute description preferredLanguage must be a
language shortcut in the format <language>-<country>, for example en-gb.

BPM - 26/32
5.4.3 Defining Reminder by Email

1. Start a new Eclipse project according to the Camunda documentation3.

2. Download the file EmailListener.jar under ../Productrelease/tools/BPMN/
Camunda/Task/EmailListener/runnable.
3. Install the EmailListener.jar file in your local Maven repository with the Maven
command mvn install: install-file -Dfile=<path_to_jar_file>/
EmailListener.jar -DgroupId=com. viamedici. bpmn. camunda
-DartifactId=EmailListener -Dversion=1.0.0 -Dpackaging=jar in the
command prompt of your computer.
4. Add <dependency><groupId>com. viamedici. bpmn. camunda</
groupId><artifactId>EmailListener</artifactId><version>1.0.0</
version></dependency> to the file pom. xml of your project.
5. Update the Eclipse project dependencies.
6. Create a folder resources in your project under ../main/java.
7. Save the properties files email. properties and email_de_DE. properties and
email_en_GB. properties under ../main/java/resources.
8. Select a task and add a task listener.
9. Enter assignment, enter Java Class. and enter
com.viaMEDICI.bpmn.camunda.task.EmailTaskListener.

3 https://docs.camunda.org/get-started/bpmn20/project-setup/

BPM - 27/32
10. Add a timer boundary event to the task.

11. Click the General tab, type Duration, and type PT3S.

BPM - 28/32
12. Select a task and add an execution listener.
13. Enter end, enter Java Class and enter
com.viaMEDICI.bpmn.camunda.task.ReminderEmailNotifierListener.

BPM - 29/32
5.4.4 Define Escalation by Email

1. Start a new Eclipse project according to the Camunda documentation4.

2. Download the file EmailListener.jar under ../Productrelease/tools/BPMN/
Camunda/Task/EmailListener/runnable.
3. Install the EmailListener.jar file in your local Maven repository with the Maven
command mvn
install: install-file -Dfile=<path_to_jar_file>/EmailListener.jar
-DgroupId=com. viamedici. bpmn. camunda -DartifactId=EmailListener
-Dversion=1.0.0 -Dpackaging=jar in the command prompt of your computer.
4. Add <dependency><groupId>com.
viamedici. bpmn.
camunda</groupId><artifactId>EmailListener</
artifactId><version>1.0.0</version></dependency> to the file pom. xml of
your project.
5. Update the Eclipse project dependencies.
6. Create a folder resources in your project under ../main/java.
7. Save the properties files email. properties and email_de_DE. properties and
email_en_GB. properties under ../main/java/resources.
8. Select a task and add a task listener.
9. Enter assignment, enter Java Class. and enter
com.viaMEDICI.bpmn.camunda.task.EmailTaskListener.

4 https://docs.camunda.org/get-started/bpmn20/project-setup/

BPM - 30/32
10. Add a timer boundary event to the task.

11. Click the General tab, type Duration, and type PT5S.

BPM - 31/32
12. Select a task and add an execution listener.
13. Enter end, enter Java Class and enter
com.viaMEDICI.bpmn.camunda.task.ReminderEmailNotifierListener.

BPM - 32/32