Properties panel extension descriptor

Developers Modeler
1

Hi there,
I’m working on a properties panel extension and got it running but the descriptor doesn’t seem to be registered correctly since my set prefix isn’t taken into account.

Saving my custom field to the bpmn file works but in the file it says wp-post-id="X" instead of itcamunda:wp-post-id="X". Additionaly the namespace declaration just says xmlns="http://it-camunda" instead of xmlns:itcamunda=....

This is how my descriptor file looks like:

{
    "name": "it-camunda",
    "uri": "http://it-camunda",
    "prefix": "itcamunda",
    "xml": {
        "tagAlias": "lowerCase",
    },
    "associations": [],
    "types": [
        {
            "name": "Post-Meta",
            "properties": [
                {
                    "name": "wp-post-id",
                    "isAttr": true,
                    "type": "String",
                },
            ],
        },
    ],
}

Any help would be much appreciated! If you need more information I’d be happy to add them.

Best regards
Felix

2

How do you use the extension?

3

First: Thanks for responding!

Second: What do you mean by “how”? How I integrate it into the the whole app? Or what I intend to do with it?

My intention on using it is integrating the modeler into a wordpress plugin where you can model BPMN as custom post types in browser. Each element of the model should be able to have another post attached as metadata.

This is how I register the extension:

var BpmnModeler = require('bpmn-js/lib/Modeler'),
    propertiesPanelModule = require('bpmn-js-properties-panel'),
    propertiesProviderModule = require('./lib/wordPressPropertiesProvider'),
    wpModdleDescriptor = require('./lib/wordPressPropertiesProvider/descriptors/post-meta'),
    camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');

var modeler = new BpmnModeler({
    container: $('#modeler-container'),
    additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
    ],
    moddleExtensions: {
        wp: wpModdleDescriptor,
        camunda: camundaModdleDescriptor,
    },
    propertiesPanel: {
        parent: $('#properties-container'),
    },
});

The contents of ./lib/wordPressPropertiesProvider/descriptors/post-meta is exactly what I’ve stated in the first post.

This is how my provider module looks like:

index.js

module.exports = {
	__init__: [ 'propertiesProvider', ],
	propertiesProvider: [ 'type', require('./Provider'), ],
}

Provider.js

var inherits = require('inherits');
var PropertiesActivator = require('bpmn-js-properties-panel/lib/PropertiesActivator');
var entryFactory = require('bpmn-js-properties-panel/lib/factory/EntryFactory');

function Provider(eventBus, bpmnFactory, elementRegistry) {

    PropertiesActivator.call(this, eventBus);

    this.getTabs = (element) => {

        return [
            {
                id: 'wp',
                label: 'Wordpress',
                groups: [
                    {
                        id: 'metadata',
                        label: 'Metadata',
                        entries: [
                            entryFactory.textField({
                                id: 'post',
                                description: 'Enter the Post\'s ID you want to add as metadata.',
                                label: 'Post',
                                modelProperty: 'wp-post-id',
                            }),
                        ],
                    },
                ],
            },
        ];
    };
}

inherits(Provider, PropertiesActivator);

module.exports = Provider;
4

I found the error. The model property in the entries field must state the namespace which makes somewhat sense but wasn’t stated in the example.

I created a pull request to fix those issues in the example here: https://github.com/bpmn-io/bpmn-js-examples/pull/37

5

Hey Felix,

thanks for getting your head around that issue!

Your pull request is a solution for that problem, but a better solution would be to specify in the descriptor which type you are extending. Then it is not necessary to specify the namespace in the entry:

{
    "name": "it-camunda",
    "uri": "http://it-camunda",
    "prefix": "itcamunda",
    "xml": {
        "tagAlias": "lowerCase",
    },
    "associations": [],
    "types": [
        {
            "name": "Post-Meta",
            "extends": [
                "bpmn:BaseElement"
            ],
            "properties": [
                {
                    "name": "wp-post-id",
                    "isAttr": true,
                    "type": "String",
                },
            ],
        },
    ],
}

I’m not gonna merge the pull request, but updated the example to make our approach more clear. Thanks again for your effort though. Much appreciated. It helps us figuring out, what’s still unclear.

6

Thanks for the clarification! I’m glad my proposal was of some use :slight_smile:

However there still is an issue in the example which I fixed here https://github.com/bpmn-io/bpmn-js-examples/pull/39/files. I don’t know why the License keeps getting removed, I tried it several times and my fork does contain the license. However the issue should be clear anyways so you might aswell reject it and correct the issue by yourself.