@bpmn-io/form-js extended

This is an example of a library of custom components on top of @bpmn-io/form-js.

How to use it in a react/angular/vue project ?

npm i @camunda-community/form-js-extended

Display a form

Renders a form. Note : newForm method returns a native @bpmn-io/form-js Form object.

import { newForm } from '@camunda-community/form-js-extended';
import { Form } from '@bpmn-io/form-js';

const form = newForm({
  container: document.querySelector('#form'),
});

await form.importSchema(schema, data);

form.on('submit', (event) => {
  console.log(event.data, event.errors);
});

Create and edit a form

Create a new form or edit an exsting one. Note : newFormEditor method returns a native @bpmn-io/form-js FormEditor object.

import { newFormEditor } from '@camunda-community/form-js-extended';
import { FormEditor } from '@bpmn-io/form-js';

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

await formEditor.importSchema(schema);

Project structure

In assets, you'll find custom css or icons used in the components or in the FormEditor

custom

Under custom, you'll find components and properties-panel. Components is the folder hosting the code of the custom components. These components may require some specific properties at design time. These properties are managed in the properties-panel folder.

custom/components

Under this folder, you'll find the components and there dependencies (in shared). api-select and range are 2 examples of custom components. Under shared, you'll find some hooks and utils as well as some parts (sub parts of components that are reusables).

custom/properties-panel

In there, you'll find the specific "groups" used in the FormEditor for the components. There is also a "utils" folder hosting some reusable code.

How to add a new component

1. Add a folder with your component name in components. Add an index.js file into it that will contain your component code..
2. Add the component into the RenderExtension in custom/components/index.js
3. If this component requires some specific configurations, add a folder in custom/properties-panel and register it in the PropertiesPanelExtension in custom/properties-panel/index.js