@quakeworks/form-js-editor
v0.6.3
Published
Edit forms - powered by bpmn.io
Downloads
6
Readme
@quakeworks/form-js-editor
An editor to create forms that can be displayed with the form-js viewer.
Installation
npm install @quakeworks/form-js-editor
Usage
import { FormEditor } from '@quakeworks/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/@quakeworks/[email protected]/dist/assets/form-js.css">
<link rel="stylesheet" href="https://unpkg.com/@quakeworks/[email protected]/dist/assets/form-js-editor.css">
<link rel="stylesheet" href="https://unpkg.com/@quakeworks/[email protected]/dist/assets/dragula.css">
API
FormEditor
Create a new form editor with options { container?: HTMLElement }
.
import { FormEditor } from '@quakeworks/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.
License
Use under the terms of the bpmn.io license.