@bpmn-io/form-js-editor
TypeScript icon, indicating that this package has built-in type declarations

1.8.2 • Public • Published

@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

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

const schema = {
  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:

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

<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js.css">
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js-editor.css">

API

FormEditor

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

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

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

FormEditor#importSchema(schema: Schema) => Promise<Result, Error>

Display and edit a form represented via a form schema.

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

FormEditor#saveSchema() => Schema

Export the form schema.

const schema = formEditor.saveSchema(schema);

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

FormEditor#attachTo(parentNode: HTMLElement) => void

Attach the form editor to a parent node.

FormEditor#detach() => void

Detach the form editor from its parent node.

FormEditor#on(event, fn) => void

Subscribe to an event.

FormEditor#destroy() => void

Remove form from editor the document.

Events

selection.changed :: { selection }

Properties panel events

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

Form lifecycle events

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

Drag events

  • 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 }

Form field events

  • formField.add :: { formField }
  • formField.remove :: { formField }
  • formField.updateId :: { formField, newId }

License

Use under the terms of the bpmn.io license.

Dependents (5)

Package Sidebar

Install

npm i @bpmn-io/form-js-editor

Weekly Downloads

3,330

Version

1.8.2

License

SEE LICENSE IN LICENSE

Unpacked Size

2.33 MB

Total Files

164

Last publish

Collaborators

  • vsgoulart
  • skaiir-camunda
  • marstamm
  • bpmn-io-admin
  • nikku
  • barmac
  • philippfromme
  • maxtru