Use camunda Input/Output in custom provider

[Index]

Hi,

We are using templates for our bpmn-js service tasks with the effect that the default Input/Output Groups are removed after selecting a template for a service task. Due to the fact that we need them my approach was to create a custom provider for my own input and output groups, strictly following the properties-panel-list-extension.

Everything worked pretty fine and I was able to create multiple Input/Output entries in the groups but there was a problem: In the created export they were exported to xml as input:parameters for the group and input:parameter for the group- entries. But I need the same naming as the standard Input-Output Groups. They are exported by default as:

<camunda:inputOutput>
  <camunda:inputParameter name=\"Input_1ht1gef\" />\
</camunda:inputOutput>

That is exactly what I need for my custom provider. My first try was to make my ‘input.json’ file to export it the way described above, but due to the fact that the camunda prefix is already in use this is not possible.

So I tried to use the exiting camunda.json file only, but clicking on the + icon to create a new value has no effect. It seems that the element for the values is not create for some reason. Making a console log for the created element showed me this:

while the created element for the default input/output (which is working but with wrong xml export) group looks like this:

You do realize that there is an values array that is missing on previous image and I am not able to find a reason or solution for this issue.

I hope someone can help us out and give us advice how to export Input/Output for our custom provider as camunda Input/Output. Thank you very much in advance.

[barmac]

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks

[Index]

Hi barmac,

thank you for your answer. I made two sandboxes and I do really hope they help to make you understand the problem.

This is the first sandbox. Keep in mind that the Input Provider was created manually. To reproduce what I am trying to achieve pls follow this steps:

1. Create an service-task
2. Click on the plus at Template in the properties panel
3. Select the createOrders template
4. Click on the + Icon to create a new input
5. Enter some value, i.e. ‘Test-Input’
6. Click on the ‘Save BPMN Diagram’ Button on the righthandside of the properties panel

You can see the created xml file. Within the xml you will find this entry:

<input:parameters>
  <input:parameter name="Test-Input" value="" />
</input:parameters>

But what we need is this xml:

<camunda:inputOutput>
  <camunda:inputParameter name="Test-Input" value="" />
</camunda:inputOutput>

So my first approach was to modify the input.json to match the required output. But this was not possible because the prefix ‘camunda’ cannot be defined in multiple json descritors.

In the second sandbox you can see the approach to modify src/customPropertiesProvider/input/utils.js and src/customPropertiesProvider/input/parts/ParametersProps.js using the default camunda.json descriptor to directly create camunda:InputOutput and camunda:InputParameter elemets, but running into some problems, as described in my previous.

I hope this helps to understand what I am trying to achieve and the problems I ran into. Thank you in advance

[Index]

Hi guys, I created the sandboxes 7 days ago. Could you please take a look and try to help me with my problem. Thank you very much

[barmac]

Hi,

In util.js, I found that you use input namespace to create your elements:

export function createParameters(properties, parent, bpmnFactory) {
  return createElement("input:Parameters", properties, parent, bpmnFactory);
}

If you want to create camunda:inputOutput, you should use exactly that name:

 export function createParameters(properties, parent, bpmnFactory) {
-  return createElement("input:Parameters", properties, parent, bpmnFactory);
+  return createElement("camunda:InputOutput", properties, parent, bpmnFactory);
 }

Etc.

[barmac]

Also, if you want to use camunda namespace, there is no need for input.json moddle extension. Just use the types from camunda-bpmn-moddle and that extension.

[Index]

Hi Barmac,

thank you for your answer. I have tried using ‘camunda:InputOutput’ before, without success. This is giving me the error:

> TypeError
> 
> undefined is not iterable (cannot read property Symbol(Symbol.iterator))

You should get the same error if you follow my steps to reproduce the issue, especially step 2 and 3.

[barmac]

I can reproduce the error in the second sandbox, and will dig more. I will get back to you soon.

[barmac]

The extension fails in this fragment of code:

    commands.push({
      cmd: "element.updateModdleProperties",
      context: {
        element,
        moddleElement: extension,
        properties: {
          values: [...extension.get("values"), newParameter]
        }
      }
    });

This is because extension.get("values") returns undefined which cannot be iterated via .... Since you want to add inputParameters, a change in the code to retrieve inputParameters should help:

    commands.push({
      cmd: "element.updateModdleProperties",
      context: {
        element,
        moddleElement: extension,
        properties: {
-          values: [...extension.get("values"), newParameter]
+          values: [...extension.get("inputParameters"), newParameter]
        }
      }
    });

Check out bpmn-js-camunda-in/output try (forked) - CodeSandbox

[barmac]

For the future, it can help if you learn how to debug your code in the browser. That’s exactly what I did to find out. Check out A Beginner’s Guide to JavaScript Debugging in Chrome - CoderPad

[Index]

Hello @barmac, thank you very much for your answer and your help. I now had the opportunity to test the solution and noticed the following: You can only create an input parameter via the + symbol if a name-value pair of the type ‘camunda:inputParameter’ is already present in the template.json. And then two input elements are created, one with the name/label according to the template.json file and one with a randomly generated name. I had hoped that it would also be possible to create input elements if they are not yet part of the template, as in not present in the template.json, and that the behavior would rather correspond to that of the standard input/output elements. It would be very nice if you could help me with this again.

[barmac]

Hi,

Indeed, the solutions seems to not work correctly. I looked into the XML and found this part:

    <bpmn:serviceTask id="Activity_1n178if" camunda:modelerTemplate="create_order">
      <bpmn:extensionElements>
        <camunda:field name="Label1">
          <camunda:string>value1</camunda:string>
        </camunda:field>
        <camunda:field name="Label2">
          <camunda:string>value2</camunda:string>
        </camunda:field>
        <camunda:inputOutput values="[object Object],[object Object]">
          <camunda:inputParameter name="receivers" />
        </camunda:inputOutput>
      </bpmn:extensionElements>
      <bpmn:incoming>Flow_0f1u2av</bpmn:incoming>
    </bpmn:serviceTask>

I think the values attribute might be cause by the same bug we found earlier in the thread.

[barmac]

It’s this part:

    // (4) add parameter to list
    commands.push({
      cmd: "element.updateModdleProperties",
      context: {
        element,
        moddleElement: extension,
        properties: {
-          values: [...extension.get("inputParameters"), newParameter]
+          inputParameters: [...extension.get("inputParameters"), newParameter]
        }
      }
    });

Also, the remove function suffered from the same bug:

-    const parameters = without(extension.get("values"), parameter);
+    const parameters = without(extension.get("inputParameters"), parameter);

    commandStack.execute("element.updateModdleProperties", {
      element,
      moddleElement: extension,
      properties: {
-        values: parameters
+        inputParameters: parameters
      }
    });

And the getter:

export function getParameters(element) {
  const parameters = getParametersExtension(element);
-  return parameters && parameters.get("values");
+  return parameters && parameters.get("inputParameters");
}

Fixes are applied at bpmn-js-camunda-in/output try (forked) - CodeSandbox

[Index]

Hi @barmac,

it looks like it is finally working. Thank you very much for your kind and awesome help.