Extending the Properties-Panel for ServiceTasks (Input variable mapping)

Developers Modeler
1

Hey guys,

I’m trying to extend the properties-panel for serviceTasks. I will give You some information about what I’m trying to do and what I did.

I want to completely model a workflow with bpmn-io. After the modeling I want to import the diagram.bpmn in Camunda.

The user needs the ability to model the entire Workflow with the browser. I implemented the Camunda ServiceTasks in a custom modeller.
This Task was relatively easy because the needed Icons/.js-Files/Specification were already provided by the diagram-js project.
I was able to add the functionality. The se-/deserialization also worked properly out of the box.

I also added the properties-panel to my implementation to edit the service Task related things link the java class. This also worked out of the box with the ability to set the implementation type (Java Class, Expression, etc.). The se-/deserialization also works perfectly.

My ServiceTask delegates need some Input variables to do their job. Now I`m trying to load a json file with the description of the different ServiceTask Delegate JavaClasses. The json-File contains:
* fully qualified class name
* Inputs (Arrays of Strings, Boolean,…) and
* Outputs like the Inputs.

The user selects a JavaClass from the file and then sees which inputs this serviceTask needs.
The mapping of such an input to an available process variable is my goal. The available variables are for simplification reasons the outputs of each serviceTask defined in the .json-file. The json is provided by the webserver.

I need some information to grasp the concept of Your Application. Where do I have to implement my functionality? I`m currently playing aroung witch the classes: https://github.com/bpmn-io/bpmn-js-properties-panel/tree/master/lib/provider/camunda

Will the deerialization and recognition by camunda work properly?

If You need more information/clarification or the source code, please let me know.

Below is a Screenshot of the current state. I want the functionality where the red box is located:

Thanks a lot!

2

Hi @zZz ,

Can you please tell me how to add the properties-panel to bpmn-js?

3

Yeah,
Step 1) you add the Properties-Panel dependency to Your package.json: "bpmn-js-properties-panel": "bpmn-io/bpmn-js-properties-panel" . (npm install to get the new dependency)

Step 2) Add a <div id="js-properties-panel"></div> to Your index.html

Step 3) In Your app.js (where Your Modeler is instantiated) You simply instantiate the modeler with these addition lines of code before:

var customModeler = require('./custom-modeler'); //For You probably  require('bpmn-js');

var propertiesPanelModule = require('bpmn-js-properties-panel'),
    camundaModdlePackage = require('bpmn-js-properties-panel/lib/provider/camunda/camunda-moddle');

var propertiesPanelConfig = {
    'config.propertiesPanel': ['value', {parent: $('#js-properties-panel')}]
};

var renderer = new customModeler({
    container: canvas,
    keyboard: {bindTo: document},
    additionalModules: [propertiesPanelModule, propertiesPanelConfig],
    moddleExtensions: {camunda: camundaModdlePackage}
});

Let me know if You need more instructions

4

@zZz The current version of the properties panel works as follows:

As of now you’d need to replace the CamundaPropertiesProvider with your own in order to implement a custom behavior.

Note that these things are private API and can change at any time. We are still in discovery state when it comes to how to provide the best extensibility and programming model for properties.

If you have any feedback on this we’d love to hear from you!

5

@nikku

Thanks for the in depth view. I`m currently on propertiespanel version 0.1.0 and modeleler 0.12.0. I changed the standard input field in the Delegate file Delegate to a

<input id="cam-impl-delegate" type="text" name="delegate" list="cam-impl-delegate-datalist">
    <datalist id="cam-impl-delegate-datalist"></datalist>

to implement my dropdown field to select a javaclass from the json file. I verified that the following function is called correctly from the ServiceTaskDelegateProps.js. But the option values are never displayed/updated. The DOM doesn’t show the options correctly. If i call document.getElementById('cam-impl-delegate-datalist'); after my insertions the options are displayed. Did I miss something?

setJavaClassDropDownElements: function (values) {
    // Get the <datalist> element.
    var dataList = document.getElementById('cam-impl-delegate-datalist');

    // Loop over the array.
    for (var i = 0; i < values.length; i++) {
        var classname = values[i];
        // Create a new <option> element.
        var option = document.createElement('option');
        // Set the value using the item in the JSON array.
        option.label = classname;
        option.value = classname;
        // Add the <option> element to the <datalist>.
        dataList.appendChild(option);
   }
}

UPDATE:

I`m now on the current versions:
“bpmn-js”: “0.12.1”
“bpmn-js-properties-panel”: “0.2.1”

6

where you got this app.js?