@bpmn-io/form-js-查看器

此库导出一个表单查看器, 用于查看和提交表单 。 使用 我们的编辑 来创建和编辑表格.

安装

npm install @bpmn-io/form-js-viewer

使用量

import { Form } from '@bpmn-io/form-js-viewer';

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

const data = {
  creditor: 'John Doe Company',
};

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

await form.importSchema(schema, data);

// add event listeners
form.on('submit', (event) => {
  console.log('Form <submit>', event);
});

// provide a priority to event listeners
form.on('changed', 500, (event) => {
  console.log('Form <changed>', event);
});

自定义文档预览请求

如果你使用 documentPreview 字段并需要自定义文件下载/审查的认证, 您可以提供 documentEndpointBuilder 通过依赖性注射提供服务.

import { Form } from '@bpmn-io/form-js-viewer';

const DocumentPreviewRequestModule = {
  documentEndpointBuilder: [
    'value',
    {
      buildUrl: (document) => document.endpoint,
      buildRequestInit: (document) => ({
        headers: {
          'x-document-id': document.documentId,
        },
        credentials: 'include',
      }),
    },
  ],
};

const form = new Form({
  container: document.querySelector('#form'),
  additionalModules: [DocumentPreviewRequestModule],
});

buildRequestInit 是可选的,用于 配置获取请求。如果省略,文档请求使用默认 fetch(url) 行为.

检查出来 一个完整的例子。 。 。 .

样式

适当的造型包括: form-js.css 所用样式表和字体 :

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

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

API 密码

Form

创建带有选项的新窗体 { container?: HTMLElement }。 。 。 .

import { Form } from '@bpmn-io/form-js-viewer';

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

Form#importSchema(schema: Schema, data?: Data) => Promise<Result, Error>

显示通过窗体图和可选数据表示的窗体.

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

Form#submit() => { data: Data, errors: Errors }

按程序提交表格 .

const { data, errors } = form.submit();

if (Object.keys(errors).length) {
  console.error('Form submitted with errors', errors);
}

Form#validate() => Errors

程序验证一个形式 .

const errors = form.validate();

if (Object.keys(errors).length) {
  console.error('Form has errors', errors);
}

Form#reset() => void

程序重设表格 .

Form#setProperty(key, value) => void

设置窗体属性, 例如 readOnly。 。 。 .

Form#attachTo(parentNode: HTMLElement) => void

将表单附加到父节点上.

Form#detach() => void

将窗体从父节点中分离出 .

Form#on(event, fn) => void

订阅 事件。 。 。 .

Form#destroy() => void

从文档中删除窗体.

活动

changed :: { data, errors }

每次有变形状态时就被炒了.

submit :: { data, errors }

在提交表格时被开除.

import.done :: { error, warnings }

当一个计划完成导入时, 无论它成功还是失败, 都被解雇 .

活动布局

• form.layoutCleared
• form.layoutCalculated :: { rows }

生命周期事件

• detach
• attach
• form.init
• form.clear
• form.destroy
• diagram.clear
• diagram.destroy

福特菲尔德事件

• formField.add :: { formField }
• formField.remove :: { formField }
• formField.focus :: { formField }
• formField.blur :: { formField }
• formField.search :: { formField, value }

许可证

B. 《公约》条款之下的使用 bpmn.io 许可证。 。 。 .