Skip to main content

DevTools

Flowable Forms DevTools is a set of tools to help in the debugging of form definitions and the flowable forms usage.

Loading...

How to use it​

To open Flowable Forms DevTools you can add the debug flag to the <Form> like this

<Form
  debug={true}
/>

Or to set the flwformsDebug global variable to true. To do that open your browser's DevTools console and type:

flwformsDebug = true;
caution

DevTools features should only be enabled on non-production environments. Enabling debug features can significantly impact performance.

In the Flowable Forms Debug panel we can find several tabs:

Payload​

It shows the current payload, it should change on every change in a value in the form. It also allows you to change directly the payload and see the changes rendered in the form (changes are updated on blur).

Config​

It shows the form definition as it is received by the form. You can edit directly the form definition and see the changes in the form on blur.

SFS​

Simple Form Syntax is an experimental and simplified version of the form definition. Instead of a json it renders a component on each line, and component hierarchy is shown with tabulation. It's also editable.

Components​

It shows the list of components represented in the form. When a component is listed with an initial tabulation bigger than the previous one, it means that component is a child of the previous one.

Every component is listed with these parts:

typeLabel{{value}}▾ computed_definition

Changes​

It list the latest 20 changes to the payload by the form.

Events​

It list the latest 20 events fired by the form

Additional Data​

Lists the additional data that can be used in expressions. This is the additional data passed to the form and also the special expression attributes ($formValid, $payload).

Limitations​

Currently the Flowable Forms DevTools panel is a part of the <Form> and they don't change when there are no changes in their props or state. For example, the DevTools doesn't update when an event is fired but it doesn't produce a change in the form.

If you set the flwformsDebug flag in the console you will need to force a payload change (or to reopen the form) to see the devtools panel.

Right now, all panels but the payload panel are readonly.