How to create a reusable process having form keys defined in runtime

[rgiacomin]

Hello Experts,

I am trying to implement a reusable, multi-level “Approval” process, as described in the diagram below. The subprocess is configured as sequential multi-instance and it runs as many times as the number of approvers defined by the “Get approvers” decision table.

By reusable, I mean other processes will call this one whenever an approval is needed, using a Call Activity. I have dozens of processes that will benefit from reusing this Approval flow.

The problem is that the Human Task called “Approve” in the reusable process cannot be associated to the final form during design/modeling time. I need the caller process to provide this information in runtime.

What I am trying to do to solve this is:

1. Implement the “approve.bpmn” as above
2. Have a “approve.html” file, deployed together with the “approve.bpmn” (“approve.html” file presented below)
3. Use as a form key for the “Approve” task: “embedded:deployment:approve.html”.
4. Implement a “caller.bpmn” with an Activity Task, referring to the Approve process.
5. Have a “caller.html” file, deployed together with the “caller.bpmn” (“caller.html” also presented below)
6. In the Caller process, I have 2 variables “deploymentId” and “resourceId”, corresponding to the deployment id of the caller process and the resource id related to the “caller.html” file

approve.html

<form role="form">
  <script cam-script type="text/form-script">

    inject(['$http', 'Uri', function($http, Uri) {

      camForm.on('form-loaded', function() {
        camForm.variableManager.fetchVariable('form');
      });

      camForm.on('variables-fetched', function() {
        var form = JSON.parse(camForm.variableManager.variables['form'].value);
        $http.get(Uri.appUri(`engine://engine/:engine/deployment/${form.deploymentId}/resources/${form.resourceId}/data`)).then(function(result){
          var div = document.createElement('div');
          div.innerHTML = result.data;
          document.getElementById("form_placeholder").appendChild(div);
        });
        
      });
    }]);
  </script>
  <div id="form_placeholder"></div>
</form>

caller.html

<h3>Request</h3>
<div class="form-group">
    <label for="initiator">Initiator</label>
    <input cam-variable-name="initiator" class="form-control" cam-variable-type="String" required readonly/>
</div>

<h3>Approval</h3>
<div class="form-group">
  <label for="decision">Approved</label>
  <select cam-variable-name="approved" class="form-control" cam-variable-type="String" required>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
</div>

Using this approach, I can get the caller form rendered in the Approve task as desired. However, process variables (such as “initiator”) are not bound to the form fields and values are not displayed.
Question are: How do I force the binding of process variables to the form fields? Is this the right approach or there is something else I should try?

Any help would be appreciated. I have attached 2 files (approve.bpmn and caller.bpmn) in this message in case you want to test it yourself.

PS.: I am using Camunda 7

Best regards,
RG

approve.bpmn (4.3 KB)
caller.bpmn (3.9 KB)

[rgiacomin]

Hi Community

any suggestions please…

[fml2]

Can’t you use an external task instead of the user task? Then you’d have a custom GUI application that would read the task data and present the user a form that depends on the data. After that, it would complete the task and the process execution would continue.

But you have to create a GUI app then.

[rgiacomin]

@fml2, Thank you for your answer. I want avoid creating an app just for this. I might consider it if this is the only option though.