Custom Form Expressions

Introduction

Form expressions are "calculations" used in building Flowable forms. Form expressions are available for use in the majority of the attributes used in form components allowing you to bind components together and define specific form behavior.

Form expressions are defined using matching double curly braces {{ and }}, and the payload holds the form data the user has to view or fill in. Expressions are built using values from the payload, literals (numbers, strings and Booleans) and a few special values.

For example, given two checkboxes, Disable and Hide, the state of a third component, Name is controlled. If the Disable checkbox is selected, the Name text component is not visible as the expression visible={{!hid}} evaluates to false.

checkbox:  label=Disable  value={{dis}}
checkbox:  label=Hide     value={{hid}}
text:      label=Name     value={{name}}  visible={{!hid}}  enabled={{!dis}}

There exist also a few utility functions available for use inside of expressions, and you can naturally use Ecmascript methods and attributes of the objects resolved in expressions.

Here are a few examples of valid form expressions:

    {{root.startDate.toLocaleDateString()}}
    {{case.dueDate |> flw.formatTime}}
    {{$currentUser.memberGroups.has('flowableUser')}}
    {{!!$payload.subForm.uploadedFiles[0] && $payload.subForm.uploadedFiles[0].created}}
    {{flw.findAll(customers, 'ownsPet', true).length > 0}}
    {{customersWhoOwnPets.length == 1 ? customersWhoOwnPets[0].firstName + ' ' + customersWhoOwnPets[0].lastName : flw.mapAttr(customersWhoOwnPets, 'lastName').sort().join(', ')}}

For more details and examples, refer to the Flowable Forms expression guide.

Note that you can also define custom data and functions for use in your form expressions. This allows for cleaner models, since complex custom logic can be modularized and recurring $constants maintained in a centralized way.

You simply need to provide an additionalData object through your frontend customization with the corresponding definitions. For example, you can put the following content in your src/index.tsx:

const applications: ExternalApplication[] = [];
const additionalData: Payload = {
  $welcomeCurrentUserDisplayName: (currentUser) =>
    `Welcome ${currentUser.displayName}`,
  userKnowsLanguageYesNo: (user, language) => {
    if (!user || !user.languages) return "NO";
    return user.languages.indexOf(language) >= 0 ? "YES" : "NO";
  },
  matchOptions: (a, b, c) => {
    return c[b.indexOf(a)];
  },
  random: window.Math.random,
};

export default { applications, additionalData };

Introduction​

Introduction