Skip to main content

Custom Components

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:

NameDescription
configThe 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
onChangeThe component must call this function when its value changes
ComponentsThe complete list of components known to the form engine: useful if the component has child components to instantiate
langstring 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).
fetchIf 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