Camunda动态表单完成任务后无法设置流程变量求助

Camunda HTML表单引擎会在表单初始化阶段（form-loaded事件前后）自动扫描DOM中带有cam-variable-*属性的元素，将其绑定到流程变量管理器。但你的输入元素是在variables-fetched事件中动态生成的，此时初始化扫描已经完成，这些新元素不会被引擎识别，因此提交任务时不会将它们的值同步为流程变量。

提供两种可行的解决方式：

方式一：手动注册变量并监听输入变化 #

直接通过Camunda变量管理器API创建变量，并监听输入框的变化来更新变量值，不依赖自动扫描：

修改variables-fetched事件中的循环代码：

camForm.on('variables-fetched', function() {
    const str = camForm.variableManager.variableValue('product_list');
    inputArray = JSON.parse(str);
    var inputContainer = document.getElementById("inputContainer");

    for(let i = 0; i < inputArray.length; i++) {
        var countInput = document.createElement("input");
        countInput.type = "number"; // 限制输入为数字，匹配Integer类型
        countInput.id = "input" + i;
        countInput.setAttribute("required", "")
        countInput.setAttribute("class", "form-control");

        // 1. 手动创建流程变量
        const varName = "count_product_" + inputArray[i].id;
        camForm.variableManager.createVariable({
          name: varName,
          type: "Integer",
          value: 0 // 设置默认值
        });

        // 2. 监听输入变化，同步更新变量值
        countInput.addEventListener('input', function() {
          // 确保输入转为整数，避免非数字值导致错误
          camForm.variableManager.variableValue(varName, parseInt(this.value) || 0);
        });

        var label = document.createElement("label");
        label.htmlFor = "input" + i;
        label.appendChild(document.createTextNode(inputArray[i].name));

        inputContainer.appendChild(label);
        inputContainer.appendChild(countInput);
        inputContainer.appendChild(document.createElement("br"));
    }
});

方式二：触发变量管理器重新解析DOM元素 #

利用Camunda提供的parseDomElement方法，让变量管理器重新扫描动态生成元素所在的容器，识别cam-variable-*属性：

在循环结束后添加一行代码：

camForm.on('variables-fetched', function() {
    const str = camForm.variableManager.variableValue('product_list');
    inputArray = JSON.parse(str);
    var inputContainer = document.getElementById("inputContainer");

    for(let i = 0; i < inputArray.length; i++) {
        var countInput = document.createElement("input");
        countInput.type = "number";
        countInput.id = "input" + i;
        countInput.setAttribute("required", "")
        countInput.setAttribute("cam-variable-name", "count_product_" + inputArray[i].id);
        countInput.setAttribute("cam-variable-type", "Integer");
        countInput.setAttribute("class", "form-control");

        var label = document.createElement("label");
        label.htmlFor = "input" + i;
        label.appendChild(document.createTextNode(inputArray[i].name));

        inputContainer.appendChild(label);
        inputContainer.appendChild(countInput);
        inputContainer.appendChild(document.createElement("br"));
    }

    // 关键：让变量管理器重新解析容器内的元素
    camForm.variableManager.parseDomElement(inputContainer);
});

• 确认product_list变量是有效的JSON字符串，解析后每个元素包含id和name属性，避免因解析失败导致循环不执行。
• 建议给输入框添加type="number"属性，确保输入符合Integer类型要求，避免提交时类型转换错误。

内容的提问来源于stack exchange，提问作者Marco S