作者：段国伟，王曦背景在控制台Web应用中，表单是最常见的交互形式。用户在表单中填写信息，点击提交，完成数据创建或修改操作。一开始，前端开发人员根据业务模型和具体需求，将表单中的各个字段一一编写或声明，测试通过后上线发布。渐渐地，开发者开始将一些常用的方法抽象成表单库进行复用，以提高开发效率。但是，随着业务复杂度的增加和需求的不断演化，对展示形式和形式灵活性的要求也越来越高。现有的表单库只能解决部分问题，开发者仍需花费大量精力更新表单。领域或开发新形式。有没有一种方法可以让开发人员快速构建表单，同时在以后更新表单时需要很少或不需要开发人员干预？至此，表单设计器应运而生。表单设计器提供了可视化的界面，让非专业的开发人员也可以通过拖拽的方式构建业务需要的表单，所见即所得。表单设计器风格目前很多开源的表单设计器都实现了，UI也大同小异。设计器的结构类似于设计软件的布局。表单设计器一般有左中右三栏布局：左边是控件列表，列出了设计器支持的表单控件；中间部分是画布，左边的控件可以直接拖入画布，支持调整顺序、复制等控件操作；右侧是表单字段的配置区，在画布中选中一个字段，该字段的所有属性都会显示在右侧，用户可以在这里配置字段标题、描述、校验规则等。原理分析表单设计器的输出是描述表单字段的JSON模式。表单设计完成后，JSONSchema会直接存储在后台。表单发布后，前端根据JSONSchema渲染表单。表单中所有字段的信息都存储在Schema中，因此表单的每次更新都会修改Schema的内容，而无需传统的编译过程。有了表单设计器，开发人员不仅可以从因业务变化而频繁更改中解脱出来，同时，非专业开发人员的工作效率也将大大提高，沟通成本也会降低。JSONSchema是表单设计者和表单呈现组件之间进行通信的语言。要理解表单设计器的核心，首先要理解Schema。在实际项目中，JSONSchema一般比较复杂，这里就不展开了。本文的主题是表单设计器的实现原理。主要关心的是如何提供一个可视化的界面让用户快速生成Schema。Schema的详细格式将在后续文章中介绍。这是定义的简化版本：interfaceSchema{fields:Record;}interfaceFieldSchema{title:string;类型：“字符串”|'对象'|'数组'|'数字'|'布尔值';组件：字符串；componentProps:{[name:string]:any;};}众所周知，表单是由多个输入控件组成的，输入控件包含各种表单，例如：文本、数字、单选和多选等。除了描述输入的是哪种类型字段对应，Schema还需要描述控件的行为，比如是否限制输入长度，是否必填等，有了这些描述，表单渲染组件就可以根据Schema渲染出预期的表单.上面的类型定义中：component表示使用什么输入组件来渲染字段；componentProps表示传递给组件的props，用来控制组件的行为；type表示组件接受并期望返回的数据类型；FieldKey是表单中的字段是用户端看不到的唯一标识；title表示表单中字段对应的标签，其值是用户可读的。表单设计者的任务是从头开始，或者以一个已有的JSONSchema作为输入，在Schema中添加、删除、更新字段，最后输出Schema。如果我们把表单设计器看成一个整体，它的作用可以用下图来表示：总体来说，表单就是把各个控件的操作组合起来，组合的结果就是一个完整的JSONSchema。为了能够修改表单域，我们在表单设计器中提供了一个域配置区。在配置区，用户可以直观地定义字段属性，无需关心Schema的具体格式。表单设计者负责将配置值转化为Schema，同时也负责将Schema转化为配置值，用于呼应配置好的页面表单。注意：配置区实际上是一个窗体，每一种控件也有自己特定的配置窗体。要完成以上功能，每个控件需要实现两个方法：toConfig和toSchema。这里用一个公式来表示这两个方法和Schema的关系，其中configValue用来呼应配置形式。FieldSchema=>toConfig=>configValue=>toSchema=>FieldSchema理清了以上思路，我们再回到表单设计器的UI呈现。左侧是设计器支持的控件列表。根据上面的分析，每个控件都需要提供控件名称、配置表单、toConfig、toSchema这四个接口的实现。中间画布负责显示Schema中的控件，需要处理用户的点击和拖动事件。当用户点击画布中的某个字段时，右侧的配置区域需要找到对应的配置表单并进行渲染。综上所述，以上就是表单设计器的核心架构实现。实现中还有一些细节需要考虑，比如formschema的定义和分析，会在后续的文章中逐步讲解。请继续关注。全享云低代码平台的表单设计器是基于Formily实现的。Formily灵活的扩展能力和面向业务的特性，我们很佩服。我们感谢Formily团队的贡献，希望我们以后也能为Formily贡献代码。关于全享云全享云平台（https://portal.clouden.io）是青云科技自主研发的低代码平台。是一个基于云原生，用于辅助企业构建各种数字化应用的工具和集成平台。平台目前在云端提供无代码和低代码两种应用开发模式，屏蔽了技术复杂性。支持可视化设计器，让开发者和业务用户通过简单的拖拽、参数配置等方式快速完成应用开发。同时集成IDaaS身份认证能力和容器DevOps能力，支持企业存量服务与全享云服务的融合。该平台还包括丰富的开发接口和强大的插件机制，开发者可以根据需要不断扩展平台的应用能力。全享云的愿景是为企业生产经营的各个象限和各个环节提供软件组件或支撑服务。
