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

Progress Bar Input

Now we want to use the bar as an input too. So it will change the value it's bound to when the user clicks on it.

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

export function ProgressBarInput(props: Model.Props) {
  const { config } = props;
  const max = config?.extraSettings?.max || 100;
  const val = ((config?.value || 0) * 100) / max;
  return (
    <div id={config.id} className="flw__component">
      <div
        style={{
          width: "100%",
          height: "39px",
          backgroundColor: "#dadada",
          borderRadius: "2px",
          position: "relative",
        }}
        onClick={(e) => {
          props.onChange(max * (e.clientX / e.currentTarget.clientWidth));
        }}
      >
        <div
          style={{
            width: `${val}%`,
            height: "100%",
            backgroundColor: val > 66 ? "#85cc00" : val > 33 ? "#ffbf00" : "#ff2e00",
            borderRadius: "2px",
            transition: "all .2s ease-out",
          }}
        />
      </div>
    </div>
  );
}

Now we are calling the onChange prop just with the new value. The engine will pick this value and update the variable this component is bound to.

Then the resolved tree of the form will be $resolved and react will call render on the components. This component will receive the updated value in the config.value prop and will be re-rendered.

← Example Progress BarEmoji Picker →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable