Use of additionalModules in the pre-packed package

[Jonas]

Hello Community,

I am using the Pre-Packed Modeler.

Everything works, currently I use the Modeler as follows:

        var container = $('#js-drop-zone');
        // modeler instance
        var bpmnModeler = new BpmnJS({
            container: '#canvas',
            propertiesPanel: {
                parent: '#js-properties-panel'
            },
            additionalModules: [
                'customTranslate',
            ],
            keyboard: {
                bindTo: window
            }
        });

The problem is that I would like to use additionalModules such as customTranslate and/or the property panel. But I can’t get it to work.

Is this possible with the pre-packaged package? I do not use a NodeJS environment.

Does anyone have an example of the property panel and the translations?

Have a nice week!

Greetings

[philippfromme]

Hey, have a look at this example: bpmn-js-examples/i18n at main · bpmn-io/bpmn-js-examples · GitHub

[Jonas]

Hello,

thanks for your reply.

I’ve already checked the examples, but I can’t get it to work.

1. I have downloaded the following module and saved in my application under /js/customTranslate/customTranslate.js
   bpmn-js-examples/i18n/src/customTranslate at main · bpmn-io/bpmn-js-examples · GitHub

2. I create the modeler as follows, but it just doesn’t work:

var container = $('#js-drop-zone');
        var customTranslate = {
            translate: [ 'value', require('/js/customTranslate/customTranslate.js') ]
        };

        // modeler instance
        var bpmnModeler = new BpmnJS({
            container: '#canvas',
            additionalModules: [
                customTranslate
            ],
            keyboard: {
                bindTo: window
            },
        });

Where is my mistake?

[philippfromme]

require isn’t going to work unless you bundle your code. Do you do that?

[Jonas]

Hello,

Thank you for your answer.

I copied the files from Git “blindly” and pasted them into my application, similar to what I did with the “Pre-Packed Modeler”. I assume that the modeler is probably already “bundled” in this case?

How do I bundle if I don’t have a NodeJS environment? Can you give me any tips?

Thank you very much and have a nice week!

[Jonas]

Hello

can anyone help me? I want to use bpmn js in a web application, but don’t quite understand why I need to “bundle”. Can anyone give me some food for thought?

I can only get it to run with the pre packaged version, but not with npm.

[nikku]

Cf. the dedicated section in our walkthrough.

You don’t need to bundle (which basically concatenates), you may very well copy the contents of that file into your file.

Just require does not work without bundling. import may, depending on your context and technology stack.