camunda嵌入式表单

User Task Forms | docs.camunda.org

首先，camunda平台的表单分为三种：

1、嵌入式任务表单允许您将自定义 HTML 和 JavaScript 表单嵌入到任务列表中。

2、Camunda Forms在 Camunda Modeler 中提供表单的可视化编辑，可用于不太复杂的表单。

3、外部任务表单可用于链接到自定义应用程序。表单不会嵌入到任务列表中。

首先在了解表单之前，我们先了解一下camunda设计器中的form key

 规则：FORM-TYPE:LOCATION:FORM.NAME

FORM-TYPE选项：embedded 、camunda-forms

LOCATION选项： deployment 、 app

今天我们只聊一下嵌入式表单的规则：

FormKey的例子：embedded:app:forms/request-loan.html

0、注意form文件的路径位置

<form name="requestLoan">
  <div class="form-group">
    <label for="customerId">Customer ID</label>
    <input class="form-control" cam-variable-type="String" cam-variable-name="customerId" name="customerId" />
  </div>
  <div class="form-group">
    <label for="amount">Amount</label>
    <input class="form-control" cam-variable-type="Double" cam-variable-name="amount" name ="amount" />
  </div>
</form>

1、需要保证forms/request-loan.html的路径能直接被访问到

http://localhost:82/forms/request-loan.html

2、bpmn文件部署文件只能在项目启动之前已经嵌入到程序中

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="diagram_Process_1628040472856" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1628040472856pp1111" name="请假流程表单部署" isExecutable="true">
    <bpmn2:startEvent id="Event_1q00b1i" camunda:formKey="embedded:app:forms/request-loan.html">
      <bpmn2:outgoing>Flow_1laqzgy</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:sequenceFlow id="Flow_1laqzgy" sourceRef="Event_1q00b1i" targetRef="Activity_0iut1cr" />
    <bpmn2:endEvent id="Event_08yjf05">
      <bpmn2:incoming>Flow_0necba9</bpmn2:incoming>
    </bpmn2:endEvent>
    <bpmn2:userTask id="Activity_0iut1cr" name="superAdmin">
      <bpmn2:incoming>Flow_1laqzgy</bpmn2:incoming>
      <bpmn2:outgoing>Flow_1d3pk4d</bpmn2:outgoing>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_1d3pk4d" name="同意" sourceRef="Activity_0iut1cr" targetRef="Activity_00asycr" />
    <bpmn2:userTask id="Activity_00asycr" name="admin">
      <bpmn2:incoming>Flow_1d3pk4d</bpmn2:incoming>
      <bpmn2:outgoing>Flow_0necba9</bpmn2:outgoing>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="Flow_0necba9" sourceRef="Activity_00asycr" targetRef="Event_08yjf05" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1628040472856pp">
      <bpmndi:BPMNEdge id="Flow_0necba9_di" bpmnElement="Flow_0necba9">
        <di:waypoint x="660" y="210" />
        <di:waypoint x="802" y="210" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1d3pk4d_di" bpmnElement="Flow_1d3pk4d">
        <di:waypoint x="450" y="210" />
        <di:waypoint x="560" y="210" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="494" y="192" width="23" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1laqzgy_di" bpmnElement="Flow_1laqzgy">
        <di:waypoint x="248" y="210" />
        <di:waypoint x="350" y="210" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Event_1q00b1i_di" bpmnElement="Event_1q00b1i">
        <dc:Bounds x="212" y="192" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_08yjf05_di" bpmnElement="Event_08yjf05">
        <dc:Bounds x="802" y="192" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1uu7lbh_di" bpmnElement="Activity_0iut1cr">
        <dc:Bounds x="350" y="170" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0kmwnkq_di" bpmnElement="Activity_00asycr">
        <dc:Bounds x="560" y="170" width="100" height="80" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>

3、springboot启动时需要使用@EnableProcessApplication注解