Custom meta model in webjar example?

Developers
1

Hi!

We are testing bpmn-js in webjar mode and let me say it’s amazing! What a great job!

We are customizing the library to make it fit to our needs and we are stuck with one thing… adding a custom meta model.

I’ve seen this example (https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-meta-model) but it uses NodeJS.

So, I’m wondering if it can be done if we choose the webjar way.

Ps: we can tune the bpmn-modeler.js if needed.

Thanks in advance!
Cristian

2

It can be easily done:

// fetch extension descriptor from back-end or inline
var extensionDescriptorStr;

var qaPackage = JSON.parse(extensionDescriptorStr);

var modeler = new BpmnJS({
  moddleExtensions: {
    qa: qaPackage
  }
});

// continue as usual

This assumes you integrated the BPMN modeler via webjar into your webapp. It publishes BpmnJS via UMD, either as a global, RequireJS or CommonJS module.

1 Like
3

A custom meta model within a WebJar project typically means customizing or extending the functionality of a UI component, data model, or library while using resources provided by a WebJar.

Here’s an example of how you could create a custom meta model in a Spring Boot application using a WebJar for Bootstrap and Angular:

Add the WebJar Dependency:

org.webjars bootstrap 5.3.0 org.webjars.npm @angular/core 16.0.0

Expose WebJar Resources: In a Spring Boot application, you don’t need extra configuration as WebJar resources are automatically accessible under /webjars.

Define Your Custom Meta Model:
// myMetaModel.js
const customMetaModel = {
title: ‘Custom Meta Model Example’,
properties: {
name: { type: ‘string’, required: true },
age: { type: ‘number’, required: false },
},
};

export default customMetaModel;

Serve and Test: Start your application, navigate to the appropriate endpoint, and verify that your custom meta model integrates with the WebJar resources.

4

Hi Cristian,

Yes, you can add a custom meta model while using the webjar approach. Although the example you referenced uses Node.js, the core concepts remain applicable. Here’s how you can adapt it:

  1. Modify bpmn-modeler.js: You can customize the bpmn-modeler.js file to include your custom meta model. Extend the BPMN Moddle schema by importing your custom descriptors directly into the webjar setup.
  2. Custom Schema Integration: Create a JSON file for your custom meta model descriptors and load it as part of your webjar bundle. Inject it during the initialization of the BPMN modeler.
  3. Dynamic Injection: Update the additionalModules configuration in the BPMN Modeler to include your custom modules. This is similar to the Node.js approach but tailored to your setup.

Feel free to share any specific challenges or code snippets if you need more guidance!