Flowable Forms

Flowable Forms

  • Release Notes
  • Guides
  • Components
  • Storybook

›Components

Components

  • Introduction
  • Accordion
  • Button Group
  • Checkbox
  • Columns
  • Data Table
  • Date
  • Doc Gallery
  • Flex Layout
  • HR
  • HTML
  • iFrame
  • Image
  • Link
  • Link Button
  • List
  • Modal
  • Number
  • Outcome Button Group
  • Panel
  • Password
  • PDF Viewer
  • Radio button
  • REST Button
  • RichText editor
  • Assign Button
  • Select
  • Text List
  • Sub-Form
  • Tabs
  • Text
  • Textarea
  • Upload
  • Wizard

Introduction

Components are graphical user interface controls used to render information on screen. Some components let user edit the value they are bound to, we call them inputs. Typical components are a textbox, a checkbox, a radio group, a table, and so on.

The components are defined in a form's definition json, including some common attributes and some component-specific attributes. Most attribute values allow expressions in addition to the type shown in the attribute table.

Common attributes

Common attributes are attributes used by most components.
When we reference common attributes in other parts of the documentation, we are referring to this table:

AttributeTypeDescription
idstringID added to the top-most DOM element of the component as data-flw-id attribute
typestringType of component e.g. "text", "boolean", "dataTable"
valuestringAttribute from the payload the component is bound to, usually an expression without operators, e.g. {{my_value}}
customValidations{expression: string, errorMsg: string}[]See Custom Validations
defaultValuestringValue to be assigned when the form is loaded with an empty payload
descriptionstringText to be rendered after the input as a component description
enabledbooleanIf false the component will be disabled
isRequiredbooleanIf true the form won't be valid until this component has some value
labelstringText to be rendered before the input as a component label
sizenumberNumber of columns to be used in the 12 column row
styleClassstringClass added to the top-most DOM element of the component
visiblebooleanIf false the component will be hidden (validations still apply)
ignorebooleanIf true the component will be hidden and the value won't be part of the payload.
See ignore section below for important notes
labelAlignstring"top": label is place on top of the input, "left": label is at the left of the input
tooltipstringWhen it is defined, a question mark icon will appear in the coponent label. When the user hovers over it it will show this text in a tooltip.
placeholderstringPlaceholder text for data entry components

Custom Validations

Custom validations let you make the form invalid when a condition is not met. You can apply custom validations to any component, and the error messages will be rendered close to it. Custom validations it's an array of validations. A validation has 2 parts:

  • expression: It's an expression that returns a boolean. When the returned value is true, the validation is ok and no error will be shown.
  • errorMsg: It's a message that will be shown to the user when the validation is not ok.

For example

[
  {
    expression: "{{!num || num % 2 === 0}}",
    errorMsg: "{{num}} must be even"
  }
]

or

[
  {
    expression: "{{phone || email}}",
    errorMsg: "Please fill in at least one contact method"
  }
]

Please note that error messages are shown for a component only when the user wrote the information inside it. Most time it means when the user focus left the input.

Ignore, Visible and Enabled

  • If visible = false or ignore = true the component won't be rendered.
  • If a component becomes ignored (its ignore attribute expression becomes true) the value the component is bound to will be deleted from the payload. If a container component becomes ignored, its children values will be deleted too.
  • If the component is ignored or not enabled the validations won't apply. And this component won't make form validations to fail.
  • If the component is not enabled and not visible, the component won't be rendered or validated, and the value it's bound too won't be deleted from payload.
AttributeHidden from ScreenValidation not appliedValue deleted
visible = falseX
enabled = falseX
ignore = trueXXX

Extra attributes

These are component specific attributes, usually found in the extraSettings property.
e.g. extraSettings.minLength, extraSettings.url, ...
These will be explained in detail for each component.

Accordion →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable