Flowable Forms

Flowable Forms

  • Release Notes
  • Guides
  • Components
  • Storybook

›Basics

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

Basic Styles

The form engine provides a few utility classes that can be useful. To add a class to to a component you can set its styleClass attribute.

Included classes are:

.flw-text-left, .flw-text-center, .flw-text-right , .flw-text-justify Useful for forcing a different text alignment.

.flw-keep-lines
Useful for keeping lines, showing line breaks correctly.

.flw-blue, .flw-green, .flw-orange, .flw-red Basic pre-defined combinations of font color and backaground color.
Useful for alerts, table rows, labels, etc...

.flw-bg-whitesmoke Defines background-color to whitesmoke color.

.flw-padding-normal, .flw-margin-normal Adds space around (margin) or inside (padding) of an element Handy for nested subforms in combination with flw-bg-whitesmoke in order to create better visual categorization.

.flw-out-padding-top-25 Adds a top padding of 25 pixels. Useful to align buttons in a row that include some labeled components.

These classes are defined in scss/_utility-classes.

← Saving the payloadCustom Styles →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable