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

Emoji Picker

To use existing react components inside the form engine is very easy. In this example we will use emoji-mart to ask our users for an emoji selection.

import * as React from "react";
import { Model, _ } from "@flowable/forms";
import { Picker } from "emoji-mart";
import "emoji-mart/css/emoji-mart.css";

export function EmojiPicker(props: Model.Props) {
  const { config } = props;
  return (
    <div id={config.id} className="flw__component">
      <Picker emoji={props.config.value} onSelect={(emoji) => props.onChange(emoji.id)} />
    </div>
  );
}

We are using 2 props from emoji-mart: emoji to tell to the component wich is the selected emoji and onSelect to be notified when the user has selected an emoji.

← Progress Bar InputCustom Datatable →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable