Skip to main content

Events

Flowable Forms provide some extension points you can use to fine tune and expand the form behaviour. For example you can add your custom code on Form.readyor on Button.click.

To use these extension points you must pass an onEvent function prop to the <Form>. If your function returns false the form will cancel the current operation when possible.

Example

handleOnEvent = (eventName, config, state, api) => {
switch (eventName) {
case "Form.ready":
api._.futch("https://swapi.dev/api/people/1/")
.then(response => response.json())
.then(jsondata => api.payload.set("username", jsondata.name)));
break;
case "Wizard.next":
const age = api.payload.get("age");
if (age && age < 18) {
alert("You must be at least 18");
return false;
}
break;
case "Outcome.click":
const fvalid = api.formValid();
if(fvalid) {
alert("Send:" + JSON.stringify(api.payload.get()));
} else {
alert("Form is not valid")
}
break;
}
return true;
}

Handler function

This is how event handler function looks like:

(eventName: string, config?: ResolvedColumn, state?: Record<string, unknown>, api?: FormAPI) => boolean
  • eventName is the name of the event. eg. Form.ready or Button.click
  • config is the component definition
  • state is the internal state of the component wich fires the event
  • api provides access to the form methods and utility functions. See section Form API.

Returning false will cancel the related action if it's cancellable.

Form Events List

EventWhenAdditionalCancellable
Form.readyWhole DOM tree of the Form is ready to be inspectedNoneNo
Form.validChangedOn every global Form validation changeDefinition + State (including isValid)No
Payload.beforeChangeOn every Payload change, before it happensPayloadYes
Payload.afterChangeOn every Payload change, before it happensPayloadNo

Components Events List

EventWhenAdditionalCancellable
Accordion.openAccordion section is openedDefinition + StateYes
Accordion.closeAccordion section is closedDefinition + StateYes
Button.clickAny button is clicked (including outcomes)Definition + StateYes
Datatable.dataLoadedDatatable content is loadedDefinition + StateNo
Datatable.nextDatatable Next button is clickedDefinition + StateNo
Datatable.previousDatatable Previous button is clickedDefinition + StateNo
Datatable.sortDatatable column sorting is changedDefinition + State (including sort data)No
Datatable.filterDatatable column filtering is usedDefinition + State (including filters data)No
DocGallery.openDocGallery image/page is openedDefinition + StateYes
DocGallery.closeDocGallery image/page is closedDefinition + StateYes
Iframe.readyIframe content is loadedDefinition + StateNo
Link.clickAny link is clicked (including link as button)Definition + StateYes
List.dataLoadedList content is loadedDefinition + StateNo
Outcome.clickOutcome button is clickedDefinition + StateYes
Pdf.readyPDF content is loaded (only for pdfjs)Definition + StateNo
Wizard.nextWizard Next button is clickedDefinition + StateYes
Wizard.previousWizard Previous button is clickedDefinition + StateYes

Common events:

EventWhenAdditionalCancellable
Component.focusInput based component receives focusDefinition + StateNo
Component.blurInput based component loses focusDefinition + StateNo
Request.errorComponent fails the request.
Available for component using REST DataSource
Definition + State (including error)No