Flowable Forms

Flowable Forms

  • Release Notes
  • Guides
  • Components
  • Storybook

›Getting started

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

Usage with Angular

To use Flowable Forms in an Angular application we will use the render function exported in the Forms bundle as in this example:

import {
  Component,
  OnDestroy,
  Input,
  ViewChild,
  AfterViewInit,
  ElementRef,
  EventEmitter,
  Output,
} from '@angular/core';
import { render, Model, destroy } from '@flowable/forms';

@Component({
  selector: 'app-flwform',
  template: '<div #el></div>',
  styleUrls: ['./flwform.component.css'],
})
export class FlwformComponent implements AfterViewInit, OnDestroy {
  @Input() props: Model.CommonFormProps;
  @Input() payload: Model.Payload = {};
  @Output() payloadChange = new EventEmitter<Model.Payload>();
  @ViewChild('el', {read: ElementRef}) el: ElementRef;

  constructor() {}

  ngAfterViewInit(): void {
    render(this.el.nativeElement, {
      ...this.props,
      payload: this.payload,
      onChange: (p: Model.Payload) => {
        this.payload = p;
        this.payloadChange.emit(p);
      },
    });
  }

  ngOnDestroy(): void {
    destroy(this.el.nativeElement);
  }
}

You can try it in this example project.

← Usage without npm or reactExpressions →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable