Custom Components

note

For the new custom component feature with v3.17.0+ please check out the QR-Code example.

You can add your own components to the form engine. This custom component can then be used in your Flow Apps. It is also useful to add a corresponding palette component to Flowable Design to have your custom component in modelled forms.

There is a step-by-step tutorial available in "How-To: Create Custom Form Component".

To do that you must write a React Component and pass it to the Form Engine in the Components property. You must assign a key to your component, when a component with type: "YOURKEY" is found, your component will be instantiated.

import HelloForms from "./HelloForms";

<Form
  ...
  Components={{ "hello-forms": HelloForms }}
/>

We can also use the form engine from a non-React App and add our custom components, which must be React components, in the following way

import HelloForms from "./HelloForms";

var form = render(document.getElementById("frmPlaceholder"), {
  config: frmDef,
  ...
  Components: { "hello-forms": HelloForms }
});

The properties your component will receive are:

Name	Description
config	The component configuration {type: "text", enabled: true, ...}. If there were any expressions in original component definition, the expressions will be already evaluated and the component will receive the resolved value instead of the expression. Additionally, config has $errors: string[], an array with the validations failing on this component, and $original: {...}, the original component configuration with the expressions unresolved
onChange	The component must call this function when its value changes
Components	The complete list of components known to the form engine: useful if the component has child components to instantiate
lang	string key of the language the component should use to show messages
translations	{ [lang: string]: { [key: string]: string } } Object with the translation keys passed to the form engine
outcomesElement?	Element or Element[] In case this component needs to render an outcome it must create a portal to the outcomeElement (see Portals - React).
fetch	If the component needs to do a request it must use this function (similar to window.fetch)
payload	{[key]: any} The complete model the form is bound with. Most components don't need to use it
additionalData	{[key]: any} The additional data passed to the form. Most components don't need to use it

As an example, this component renders a hello world:

import * as React from 'react'

export function HelloForms() {
  return <span>Hello Forms</span>
}

You can find more examples in this documentation and this example project Flowable Forms Mysuite