Note: This site is automatically translated by specialized translation tools. This can lead to some inconsistency in the content. Thank you for your understanding.
OK

User Interaction in Camunda: How User Interaction works with DPM

27.04.2022

Welcome to part 2 of our blog article series about our in-house process automation platform DPM. In the previous article “Data Handling in Camunda: How to Start with DPM Json” we introduced our popular data handling tool DPM Json. Now we’ll take a look at how to create complex forms and interaction options directly from a Camunda process.

Creating forms is daily business for a Process Consultant, and Camunda offers very good tools for this task. However, we decided to take personalization and flexibility in form creation to a higher level, especially to be able to easily display complex data types like lists or objects and interact with them in different ways.

Design: Customize DPM

Thanks to the open software architecture of our DPM platform, it is very easy to redesign it visually. The basic design of our web application is in FROX theme with blue, black and white tones. In addition, our logo is placed on the top left. This view is completely customizable to a client’s branding and theme. All other views, forms, etc. are displayed accordingly.

Newsroom Camunda DPM Json User Interaction Design FROX AG
Figure 1: The design of DPM can be customized.

Form fields in DPM

With the DPM platform it is possible to generate form fields directly from the process definition. Forms can be created in user tasks and in the process start within a form. To create a form field, a new field must be opened in the task in the “Forms” tab using the plus button. With the following illustrated setting a text field is created:

Newsroom Camunda DPM Json User Interaction Formular FROX AG
Figure 2: You create a form field via the “Forms” tab.

 

After this setting, the newly created form will look like this on the DPM platform form:

Newsroom Camunda DPM Json User Interaction String FROX AG
Figure 3: String in form field in DPM.

 

The label of the field is “My String” and contains “My default value” as default value. The type of the field is “string”, which is a synonym for “text” in computer science.

Up to this point, the DPM platform does not differ in terms of configuration from the form fields already provided by Camunda. All field types already available are supported:

  • String (text field)
  • Long (number field)
  • Boolean (checkbox)
  • Date (date field)
  • Enum (field with specified choices)

This means that you can migrate your existing Camunda processes to our platform without any problems and have the forms generated as before. However, this is just the beginning for the DPM platform. Below we show you a selection of the fields we provide.

Multiselect combobox

With the form field type “custom type” and the specification “combobox” a combobox (also called “dropdown” or “select”) is automatically created on the form. A simple combobox is already offered in Camunda with the field type “Enum”. However, it can be very common that a user needs to select multiple fixed values, such as when setting an employee’s areas of expertise. Here there are fixed values from which a user can select several.

Newsroom Camunda DPM Json User Interaction Multiselect Combobox FROX AG
Figure 4: Multiselect combo box in form field in DPM.

 

On the form UI, you can now enter several possible centers of excellence.

Slider

With the form field type “custom type” and the specification “slider” a slider is automatically created on the form. This is especially useful when the user needs to enter a rough numerical specification, for example: “How satisfied are you with the service?”

Newsroom Camunda DPM Json User Interaction Slider FROX AG
Figure 5: Form field type “custom type”, specification “slider” in DPM.

 

Lists

With the form field type “custom type” and the specification “table” a table is automatically displayed on the form, which can contain a list of values.

Newsroom Camunda DPM Json User Interaction Listen FROX AG
Figure 6: Form field type “custom type”, specification “table” in DPM.

 

In this configuration we see several details:

The process variable that is displayed is called “people” and as expected it is a list.

The first property “columns” specifies that from the list “people” the attributes “firstName”, “lastName” and “age” are displayed for each list element.

The second property “selectionStrategy” indicates how the elements can be selected. In this case it is “collection”, which means that each list item has a checkbox that can be selected. The selected items are then written to the “people” list. This means that you can use this method to manually select or deselect each list.

The third property “filterable” means that you can filter the list so that each column can be searched with a search term.

The fourth property “column.width.age” sets the width of the column “age” to the value 40. This property can be set for all displayed columns.

On the UI this looks like this:

Newsroom Camunda DPM Json User Interaction Listen UI FROX AG
Figure 7: List view on the UI in DPM.

 

File Upload

In some User Tasks it may be necessary to upload one or more files, for example to save contracts etc. in the process. This is no problem with the DPM platform. It is sufficient to create a form field with the field type “file”:

Newsroom Camunda DPM Json User Interaction File Upload FROX AG
Figure 8: File upload in DPM.

 

In this case, the property “maxFiles” was also set to the value 3, which means that no more than three files can be uploaded.

Field settings in DPM

Each field is configurable under different aspects, among others:

  • Whether the field is required, for this the field is assigned the property “required”.
  • Whether the field should be modifiable, for this the field is assigned the property “readonly”.
  • Whether the field should be visible, for this the field is assigned the property “visible”.

These three properties can be either “true” (true) or “false” (false).

They can also be set with an expression, for example:

${myCondition == "isMarried"}

In this condition the value “true” is returned if the variable “MyCondition” contains the value “isMarried”.

Pleasant additional feature: The expressions are recalculated for each user interaction. This means that you can, for example, show or hide an entire form section by changing a checkbox in real time (by calculating the value of the variable “visible”).

Furthermore, it is possible to assign each form element to a fieldset. This is very useful to divide forms into sections, e.g. to separate input fields for personal data from those for work topics.

Live Reload for Lists in DPM

With DPM it is possible to reload the data for a table on every page load (process independent). This is especially useful when working with real-time data that is continuously updated. For this purpose, you can call an integration from the Form UI that pulls the data.

Approval Tasks in DPM

It is often necessary to approve or reject a form. This is possible with the DPM platform using the “approval” property. The approval buttons “Accept” and “Reject” are automatically added to the form when this property is set. In addition, you can personalize the text on the buttons by setting the “approveButtonLabel” and “rejectButtonLabel” properties. The default buttons look like this:

Newsroom Camunda DPM Json User Interaction Button Accept Reject FROX AG
Figure 9: “Accept” and “Reject” buttons for Approval Tasks in DPM.

Summary: Custom settings in DPM

As you can see, the DPM platform gives you extensive options to design your application and forms exactly the way you want. These settings can be completely defined from the process model and are 100% compatible with Camunda’s standard form features. We will be happy to answer your questions and advise you so that you can make the best use of our platform.

Personal advice on Camunda and the DPM platform

Our experts for Camunda and the DPM platform will be happy to take the time to show you the possibilities for your project. Let us know what challenge you want to tackle - whether you just want to get informed or already want to hit the ground running.

Request advice now
Jonas Büchel Head of Business Process Solutions Standortleiter Winterthur FROX AG

Jonas Büchel

Head of Business Process Solutions

FROX newsletter

As a subscriber to our newsletter (German only), you will regularly receive information
on exciting projects, new technologies, events, and much more.
Keep your finger on the pulse!

Subscription FROX AG