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

    0.8.0-alpha.0 • 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.2.3/dist/assets/form-js.css">
    <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.3/dist/assets/form-js-editor.css">
    <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.3/dist/assets/dragula.css">
    <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.3/dist/assets/properties-panel.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.

    License

    Use under the terms of the bpmn.io license.

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    607

    Version

    0.8.0-alpha.0

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    1.06 MB

    Total Files

    77

    Last publish

    Collaborators

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