@bpmn-io/form-js (英语)
视图, (中文(简体) ), 编辑 财务报告和审定财务报表 模拟 基于JSON的表格.
使用量
此库输出 a 窗体查看器, (中文(简体) ), 编辑器 财务报告和审定财务报表 游乐场。 。 。 .
显示窗体
以 窗体计划 和现有数据:
import { Form } from '@bpmn-io/form-js';
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);
form.on('submit', (event) => {
console.log(event.data, event.errors);
});
见 查看器文档 详细情况.
创建和编辑窗体
创建新窗体或编辑出局窗体 :
import { FormEditor } from '@bpmn-io/form-js';
const formEditor = new FormEditor({
container: document.querySelector('#form-editor'),
});
await formEditor.importSchema(schema);
见 编辑文档 详细情况.
用输入和输出数据创建和模拟窗体
以输入和输出数据创建和模拟窗体 :
import { FormPlayground } from '@bpmn-io/form-js';
const schema = {
type: 'default',
components: [
{
key: 'creditor',
label: 'Creditor',
type: 'textfield',
validate: {
required: true,
},
},
],
};
const data = {
creditor: 'John Doe Company',
};
const formPlayground = new FormPlayground({
container: document.querySelector('#form-playground'),
schema,
data,
});
见 游乐场文档 详细情况.
从窗体获取计划变量
使用 getSchemaVariables 用于检索在表单图中定义的变量。 这有助于收集以某种形式消耗和生成的数据.
import { getSchemaVariables } from '@bpmn-io/form-js';
const variables = getSchemaVariables(schema);
console.log('Schema variables', variables);
还可以区分投入变量和产出变量:
import { getSchemaVariables } from '@bpmn-io/form-js';
const outputVariables = getSchemaVariables(schema, { inputs: false });
const inputVariables = getSchemaVariables(schema, { outputs: false });
资源
许可证
B. 《公约》条款之下的使用 bpmn.io 许可证。 。 。 .