动态表单

Dynamic Form | 动态表单

所谓的动态表单,即前后端约定一套表单定义规范;根据此规范,后端提供表单描述配置 JSON Schema;前端将此配置传入到动态表单框架后即可动态渲染出整个表单。只需要通过一份配置,就能生产一个表单应用,它能够极大地提升我们的效率,组件的复用率等等。动态表单会提供一个基本的组件库,供业务或者开发同学通过可视化的一种方式来配置所要的表单。同时为了满足业务对表单校验逻辑、数据初始化、级联、业务属性等要求而抽象的一套功能模型。此外,为了使各种系统能够快速接入动态表单,采用插件的方式嵌入业务系统中,从而保证业务系统的操作连贯性。对于表单的 JSON Schema 描述,互联网工程组(IETF)组织曾经制定过相关草案。这份草案约定通过 jsonSchema、uiSchema、formData 三个 JSON Object 来完整的描述一个静态表单。

  • 组件库:丰富的自定义组件、沉淀业务组件
  • 可视化:提供可视化配置功能,实现所见即所得
  • 功能模型:校验器、数据源、业务属性等等
  • 业务隔离:平台工具,不提供具体业务,提供标准接口业务实现
  • 插件化:可嵌入业务系统中,保持业务系统配置的连续性

表单模型共有 6 个模块构成: 属性、数据源、校验器、字段、表单/模板、数据。对于表单的 JSON Schema 描述,互联网工程组(IETF)组织曾经制定过相关草案。这份草案约定通过 jsonSchema、uiSchema、formData 三个 JSON Object 来完整的描述一个静态表单。

动态表单思维脑图

其实当你的业务量达到一定的量级,做很多流程审批任务协同之类的中后台产品的时候就会发现表单的需求真的是源源不断,大同小异,既浪费时间也浪费精力。我们通过 json schema 规范每个 UI 组件。这个规范其实包括了中后台系统的 UI 规范,约束设计师的随意发挥,从而降低开发维护成本。

层次化系统

表单配置可视化

表单的配置化其实就是将表单开发的逻辑,转化成为了一种结构,在前端看来,它是个 JSON 或者是个对象。手动编写表单配置是可以被可视化的工具所替代的,这样,表单的开发和维护就变得更加清晰、简便了,效率也会得到提升。一份配置对应着一个表单的时候,但我们在一个网站应用(业务)上有多种场景需要多个表单,这时候就会有多份配置,多份配置会就需要对齐进行管理,甚至需要动态化异步加载配置。我把配置相关的事情,也一并列入表单中台的设计之中,让链路更加地完整。

实现可视化的手段,就是通过表单来生产配置,然后渲染表单。