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

Event	When	Additional	Cancellable
Form.ready	Whole DOM tree of the Form is ready to be inspected	None	No
Form.validChanged	On every global Form validation change	Definition + State (including isValid)	No
Payload.beforeChange	On every Payload change, before it happens	Payload	Yes
Payload.afterChange	On every Payload change, before it happens	Payload	No

Components Events List

Event	When	Additional	Cancellable
Accordion.open	Accordion section is opened	Definition + State	Yes
Accordion.close	Accordion section is closed	Definition + State	Yes
Button.click	Any button is clicked (including outcomes)	Definition + State	Yes
Datatable.dataLoaded	Datatable content is loaded	Definition + State	No
Datatable.next	Datatable Next button is clicked	Definition + State	No
Datatable.previous	Datatable Previous button is clicked	Definition + State	No
Datatable.sort	Datatable column sorting is changed	Definition + State (including sort data)	No
Datatable.filter	Datatable column filtering is used	Definition + State (including filters data)	No
DocGallery.open	DocGallery image/page is opened	Definition + State	Yes
DocGallery.close	DocGallery image/page is closed	Definition + State	Yes
Iframe.ready	Iframe content is loaded	Definition + State	No
Link.click	Any link is clicked (including link as button)	Definition + State	Yes
List.dataLoaded	List content is loaded	Definition + State	No
Outcome.click	Outcome button is clicked	Definition + State	Yes
Pdf.ready	PDF content is loaded (only for pdfjs)	Definition + State	No
Wizard.next	Wizard Next button is clicked	Definition + State	Yes
Wizard.previous	Wizard Previous button is clicked	Definition + State	Yes

Common events:

Event	When	Additional	Cancellable
Component.focus	Input based component receives focus	Definition + State	No
Component.blur	Input based component loses focus	Definition + State	No
Request.error	Component fails the request. Available for component using REST DataSource	Definition + State (including error)	No