Flowable Forms

Flowable Forms

  • Release Notes
  • Guides
  • Components
  • Storybook

›Extend

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

Panel Composition

We will do a component that uses several existing components. In this case we want to implement a new component that forces the user to check a box accepting their responsibility before editing a value.

import * as React from "react";
import { Model, _ } from "@flowable/forms";

const definition = {
  extraSettings: {
    layoutDefinition: {
      rows: [
        {
          cols: [
            {
              type: "boolean",
              label: "I know what I'm doing",
              value: "{{heKnows}}",
              size: 6,
            },
            {
              type: "text",
              value: "{{txtVal}}",
              enabled: "{{heKnows}}",
              size: 6,
            },
          ],
        },
      ],
    },
  },
};

export class PanelComposition extends Model.FormComponent {
  render() {
    const Panel = this.props.Components.panel;
    return (
      <div className="flw__container">
        This is the panel composition example
        <Panel {...this.props} />
      </div>
    );
  }
  static $resolve(
    unresolved: Model.Column,
    scope: Model.Payload,
    addData: Model.Payload,
    Components: Model.ComponentStore
  ) {
    const resolve = Components.panel.$resolve;
    return resolve({ ...unresolved, ...definition }, scope, addData, Components);
  }
}

Now in the resolve function we are enriching the definition by adding more components inside the extraSettings.layoutDefinition. The $resolve function has the responsibility of resolving its children. The Panel will resolve recursively its children and it will will traverse and instantiate the corresponding components inside its render function.

← Custom DatatableCustom Composition →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable