[11]深入浅出工作开源框架Camunda：部署HTML表单

Camunda不仅仅支持类似于JSON格式的表单，也支持HTML格式的表单。支持Camunda JSON表单格式比较简单，比如类似下面的表达。

{
  "schemaVersion": 2,
  "components": [
    {
      "label": "Text Field",
      "type": "textfield",
      "id": "Field_0kpmyne",
      "key": "field_1kjqk1b"
    },
    {
      "label": "Number",
      "type": "number",
      "id": "Field_1pp63a0",
      "key": "field_1iy0fgh"
    },
    {
      "label": "Checkbox",
      "type": "checkbox",
      "id": "Field_09m9mbv",
      "key": "field_1iufp4h"
    },
    {
      "values": [
        {
          "label": "Value",
          "value": "value"
        }
      ],
      "label": "Radio",
      "type": "radio",
      "id": "Field_0tanpr2",
      "key": "field_0wz7jwp"
    },
    {
      "values": [
        {
          "label": "Value",
          "value": "value"
        }
      ],
      "label": "Select",
      "type": "select",
      "id": "Field_0uvqqg4",
      "key": "field_0vwokcn"
    },
    {
      "text": "# Text",
      "type": "text",
      "id": "Field_1mmwz20"
    },
    {
      "action": "submit",
      "label": "Button",
      "type": "button",
      "id": "Field_1kwxmg4",
      "key": "field_184exnw"
    }
  ],
  "type": "default",
  "id": "Form_1kmjw6v"
}

其UI视图如下：

那么如果需要部署一个带表单的应用，且是独立部署，不是把流程和html表单嵌入到Java应用里面应该如何做呢？
比如下面的流程和表单。

其流程文件（loanApproval.bpmn）源码如下：

  
    
      SequenceFlow_1
    
    
    
      SequenceFlow_3
    
    
      SequenceFlow_1
      SequenceFlow_3
    
    
  
  
    
      
        
        
        
          
        
      
      
        
        
        
          
        
      
      
        
        
          
        
      
      
        
        
          
        
      
      
        
      
    
  

其有两个表单，启动的节点（Load Request Recevied）和用户任务（Approve Request）。
其分别关联了下面的表单：
（1）开始节点的表单（start-form.html）

Embedded Forms Quickstart


  


    

      
Loan Data

      
      

        Type of the loan
        

          
          
            Mortage Loan (5%)
            Cash Advance (10%)
          
        

        
        

          Please select a loan type.
        
      

      
      

        Amount
        

          
        
      

      
      

        Runtime (Years)
        

          
        
      

      
      Projected monthly payment:
      

        {{monthlyPayment}}€ at {{interest}}% interest rate.
      

      

        Invalid selection.
      

      
      

    

    

      
Contact Data

      
      

        Gender
        


          
          
            Mr.
            Mrs.
          

        
      

      
      

        First Name
        

          
        
      

      
      

        Last Name
        

          
        
      

      
      

        Email
        

          
        
      

      
      

        Address
        

        
        
      

    

  

（2）用户任务节点的表单（task-form.html）

  
  
Request Summary

  


    

      
Type of the loan:
      
{{ loanType }}
    

    

      
Amount:
      
{{loanAmount}}
    

    

      
Runtime (Years):
      
{{loanRuntime}}
    

  

  
Contact Data:

  

    
      Mrs.
      Mr.
      {{firstname}} {{lastname}}
    

    {{address}}

    {{email}}
  

  
Approval

  Do you approve this request?

  

    
  

那么，其是如何在流程里面关联html表单的呢？以开始节点为例，
在 Forms的Type选择，“Embedded Or External Task Forms”
Form Key 输入： embedded:deployment:start-form.html

用户任务节点类似。

关联后，就可以通过Camunda modeler直接进行部署~

部署成功后效果如下：
1）启动节点

2. 用户任务节点

部署成功，且能直接执行~