使用Camunda BPMN和DMN构建动态Web表单

业务过程模型和标记法（BPMN）是可视化建模和自动化业务流程的通用标准。它用于设计和自动化工作流，定义任务序列、审批和用户交互。而决策模型和标记法（DMN）则对那些过程中嵌入的复杂决策逻辑进行建模，以结构化和可重用的方式自动化业务规则。

Camunda的过程编排平台通过直观的可视化建模器为业务和IT开发人员提供协作环境，该建模器遵循BPMN和DMN标准。使用Camunda进行建模可通过自动化减少开发和维护实际业务流程所需的时间。除了自动化之外，结合BPMN和DMN还允许我们创建动态Web表单，其中表单的字段、验证甚至流程都根据实时业务规则进行调整，而不是硬编码。这使得应用程序更加灵活、更易于维护且由业务驱动。

什么是动态Web表单

动态Web表单是一种交互式表单，其字段、验证和流程由业务规则或用户输入驱动。表单不是将逻辑硬编码到UI中，而是利用决策模型仅显示相关内容，使其更智能、更精简且更易于维护。

考虑一个具有多个收集用户输入数据网页的应用程序。实现这些网页的传统方式是硬编码字段类型、验证并在多个页面中重复相同的任务集。动态Web表单的概念是构建一次，多次使用。字段和验证在中央配置，单个网页根据页面的预期目的渲染字段。

一个简单的用例

我将创建一个带有几个动态问题的简单Web表单。表单将启动一个BPMN过程实例，该实例将跟踪不同的答案和流程。DMN将配置问题，这些问题将动态显示在Web表单中。将使用Camunda建模器创建BPMN图和DMN表。

Web应用程序使用Angular构建前端，Spring Boot构建后端，并集成Camunda流程引擎。

高层架构

BPMN设计

捕获用户对不同问题的答案/输入的主要BPMN过程包括：

用于问题的子过程
几个脚本任务，用于检查并设置执行变量（如果用户到达最后一个问题）、答案和问题-答案收集
几个用户任务，用于回答问题并提交表单

子过程，问题BPMN包括：

几个脚本任务，用于解析表单的输入，然后准备下一个问题有效负载以在表单中渲染
DMN表，用于根据上一个问题的答案/输入确定下一个问题

DMN设计

下一个问题DMN有多个表来保存不同的输入元素及其答案选项。

下一个问题表 – 该表将question_id和answer作为输入，并在条件满足时返回另一个question_id
问题列表表 – 该表保存问题元数据 - question_id、输入类型（文本、单选、复选框等）、问题标题、answer_choice_id
答案选项表 – 该表保存单选、下拉菜单、复选框等的不同答案选项
字面量表达式 – 这将所有三个表组合在一起，并准备带有答案选项的问题集合
输入 – 此DMN的入口点，questionIdInput和answerInput，用于确定下一个问题

此DMN是表单动态特性的基础。问题、输入字段类型、答案选项、标题、描述、帮助文本等 – 所有内容都配置为规则。前端UI仅动态渲染问题，而不是在表单本身中对输入字段进行硬编码。

应用程序开发

BPMN和DMN设计之后的下一步是将这些模型部署到Camunda引擎中，并实现前端和后端。前端UI将通过调用Camunda本机API进行流程编排来渲染动态表单。

后端

使用带有嵌入式Camunda引擎的Spring Boot作为此动态表单应用程序的后端。后端非常轻量级，用于部署主要BPMN过程、问题BPMN过程和问题DMN。

1
2
3
4
5
6
7
8
9


1├── src/main/
2│   ├── java/com/dynamicform/workflow/
3│   │   └── Application.java
4│   └── resources/
5│       ├── application.yaml
6│       ├── main-process.bpmn
7│       ├── question.bpmn
8│       └── next-question.dmn
9└── pom.xml

前端

动态表单渲染器UI使用Angular构建。表单行为（字段、验证和可见性）不是硬编码到Angular组件中，而是由Camunda BPMN工作流和DMN决策表驱动。针对DMN获取问题元数据和详细信息，并在表单组件中解析JSON数据以渲染具有输入类型、答案选项等的问题。UI和后端流程引擎之间的集成通过Camunda引擎REST API完成：

1
2
3
4


1- /engine-rest/process-definition/key/main-process/start : 启动过程实例
2- /engine-rest/process-instance/${processId}/variables : 获取过程实例的变量
3- /engine-rest/task : 创建任务
4- /engine-rest/task/${taskId}/complete : 标记任务完成

我创建了一个简单的表单，其中包含几个关于用户是否吃早餐的问题，这是它根据上一个问题的答案渲染的方式。

表单/UI页面以动态方式显示问题，并基于对上一个问题的响应。这个单一的UI页面可以基于简单配置渲染任何表单，而不是为不同的表单创建多个UI页面。

配置：构建一次，多次使用

表单元素或问题可以作为特定UI页面的模板/页面进行分组。问题列表DMN中的一个附加列（作为模板/页面标识符）可以为每个页面保存所有表单元素/问题。

我的经验教训

这种在代码外部配置表单元素的方法无疑为开发UI提供了灵活性。但最重要的是，它使业务团队能够在设计时配置流程流、表单元素、规则等，而无需或只需开发人员最少的帮助，这最终加速了交付。