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.ready
or 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 |