Flowable Forms

Flowable Forms

  • Release Notes
  • Guides
  • Components
  • Storybook

›Customization

Getting started

  • Introduction
  • Installation
  • Usage with react
  • Usage without npm or react
  • Usage with Angular

Basics

  • Expressions
  • Outcomes
  • Datasource
  • Utilities Library _
  • Edoras Adapter
  • Events
  • API
  • DevTools
  • Saving the payload
  • Basic Styles

Customization

  • Custom Styles
  • Custom Fetch function
  • Localisation
  • Additional data

Extend

  • Custom Components
  • Example Progress Bar
  • Progress Bar Input
  • Emoji Picker
  • Custom Datatable
  • Panel Composition
  • Custom Composition
  • Extend Flowable Work
  • Extend Flowable Design

Additional data

The payload holds the form data the user has to edit. All the data in the payload can be used in expressions, which is usually enough for most applications. But sometimes we want to use data in expressions that is not editable, for example the role of the loged in user, the parent of the current form scope or the backend urls.

For example, you may want to enable a component only when the logged in user is an admin.

To provide the additional data, we can pass the additionalData prop to the form.

<Form
  ...
  additionalData={{ 
    currentUser: {
      name: "Lina Morgan",
      role: "EDITOR"
    } 
  }}
/>

In addition to data, we can also add functions. These functions are useful to format data, for example, passing a function like:

<Form
  ...
  additionalData={{ 
    currentUser: {
      name: "Lina Morgan",
      role: "EDITOR"
    },
    now: new Date(),
    formatTime: date => `${date.getHours()} : ${date.getMinutes()}
  }}
/>

and then using it in the form:

← LocalisationCustom Components →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable