@bpmn-io/form-js-editor

An editor to create forms that can be displayed with the form-js viewer.

Installation

``
npm install @bpmn-io/form-js-editor
`

Usage

`javascript
import { FormEditor } from '@bpmn-io/form-js-editor';

const schema = {
type: 'default',
components: [
{
key: 'creditor',
label: 'Creditor',
type: 'textfield',
validate: {
required: true,
},
},
],
};

const formEditor = new FormEditor({
container: document.querySelector('#form-editor'),
});

await formEditor.importSchema(schema);
`

Check out a full example.

Styling

For proper styling include the necessary stylesheets, and font used:

`html
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap"
rel="stylesheet" />



`

API

$3

Create a new form editor with options { container?: HTMLElement }.

`javascript
import { FormEditor } from '@bpmn-io/form-js-editor';

const formEditor = new FormEditor({
container: document.querySelector('#form-editor'),
});
`

$3

Display and edit a form represented via a form schema.

`javascript
try {
await formEditor.importSchema(schema);
} catch (err) {
console.log('importing form failed', err);
}
`

$3

Export the form schema.

`javascript
const schema = formEditor.saveSchema(schema);

console.log('exported schema', schema);
`

$3

Attach the form editor to a parent node.

$3

Detach the form editor from its parent node.

$3

Subscribe to an event.

$3

Remove form from editor the document.

Events

$3

$3

- propertiesPanel.focusin
- propertiesPanel.focusout
- propertiesPanel.showEntry :: { id }
- propertiesPanel.updated :: { formField }

$3

- detach
- attach
- rendered
- form.init
- form.clear
- form.destroy
- diagram.clear
- diagram.destroy
- dragula.created
- dragula.destroyed
- editorActions.init :: { editorActions }

$3

- drag.start :: { element, source }
- drag.end :: { element }
- drag.drop :: { element, target, source, sibling }
- drag.hover :: { element, container, source }
- drag.out :: { element, container, source }
- drag.cancel :: { element, container, source }

$3

- formField.add :: { formField }
- formField.remove :: { formField }
- formField.updateId :: { formField, newId }`

License

Use under the terms of the bpmn.io license.