Flowable Forms Cheatsheet

This document aims to provide users of Flowable Forms with a brief introduction to the most essential concepts surrounding the use of Form Expressions. For a more complete discussion see Form Expressions in the Flowable Developer Guide.

About Form Expressions

Flowable Forms is built on the React technology. As such, there are many dynamic elements. To facilitate working with Flowable Forms, so-called Form Expressions were introduced to perform important tasks with a simple yet powerful expression language. A simple Form Expression consists of two curly braces and an enclosed variable, e.g., {{your_expressions}}. However, it is also possible to construct more complex Form Expressions for specific use cases. That way, modelers can concentrate on modeling instead of coding.

While there are many places where Form Expressions are used, easily the most important one is for binding variables. Many form components require you to set a value, often referred to as binding. Using a Form Expression, it is possible to define what value a form component displays and where it saves its value. For instance, a text field which saves its value to the variable firstName would look like this: {{firstName}}. If that same variable were used in another form, where firstName was already set, it would display the value.

Another common use case for Form Expressions is in so-called Runtime Conditions. These conditions allow you to change certain aspects of a component dynamically. For instance, it is possible to make a text field required if the variable age is greater than 18 with the following expression: {{age > 18}}. This expression is set into the "Required" field of the component.

Components which are only used for formatting can also benefit from the fact that JavaScript functions can also be applied to values in Form Expressions. For instance, if you want to return the lower-case version of a string, simply add toLowerCase() at the end of your value: {{clientName.toLowerCase()}}. It would even be possible to chain several JavaScript functions. The following expression implements turns the name of a person into an email address, albeit in a very rudimentary way: {{txt1.replace(' ', '.').toLowerCase() + '@' + 'flowable.com'}}.

There are many online references that can be consulted, for instance, the Mozilla Developer Network. For instance, the documentation about Numbers describes not only important principles but also lists many useful functions that can be used.

Common Form Expressions and Use Cases

The following table shows some examples to achieve some of the most common tasks.

Description Expression

product is equal to selectedProduct

{{product = selectedProduct}}

amount is equal to 0 and it is made sure that amount is a number

{{amount == 0}}

product is equal to the string 'abc'

{{product = 'abc'}}

product is not equal to 'abc'

{{product ! 'abc'}}

amount is less than 1000

{{amount < 1000}}

amount is less or equal to 1000

{{amount < 1000}}

amount is greater than 1000

{{amount > 1000}}

amount is greater or equal to 1000

{{amount > 1000}}

product has a value (exists)

{{product}} or {{product ! null}}

product was defined

{{product != undefined}}

product has no value or is false or is "falsy"

{{!product}}

Boolean value isGoldClient is true

{{isGoldClient}} or {{isGoldClient = true}}

Boolean value isGoldClient is false

{{!isGoldClient}} or {{isGoldClient = false}}

Logical And (is true if all variables evaluate to true)

{{isGoldClient && income > 7000}}

Logical Or (is true if one of the variables evaluate to true)

{{isGoldClient || income > 12000}}

Check if map or object client contains a variable clientId

{{client.hasOwnProperty('clientId')}}

Safely retrieve variable clientId on map or object client

{{client.name || ''}}

Get the number of elements in suppliers

{{suppliers.length}}

Get the index (position) of clientId in the clients array (Array) or list (back end)

{{clients.indexOf(clientId)}}

Convert a string to lowercase letters

{{textField.toLowerCase()}}

Replace Hi in the String with Hallo

{{textField.replace('Hi', 'Hallo')}}

Check if the String contains a certain String. This function returns a boolean value.

{{textField.includes('Hi')}}

Truthiness and Falsiness

Unlike Java and other languages, JavaScript knows the concept of "truthy" and "falsy". This differs from the strict definition where a value is only true if it evaluates to a true boolean value as it is the case with Back End Expressions.

A value in Form Expressions evaluates to true if:

  • If a value is the Boolean value true

  • If a value is a string, e.g., 'Product A'

  • If a value contains an object, e.g., a date, a case etc.

  • If a value is a number (positive or negative, with or without fraction)

  • If a value is {} or []

  • If a value is Infinity or -Infinity

A value in Form Expression evaluates to false if:

  • If a value is the Boolean value false

  • If a value is null

  • If a value is undefined

  • If a value is 0

  • If a value is an empty string, i.e., '' or "".