Camunda 8 modeler - Angular 9

Hi,

I’m trying to load the camunda-cloud modeler view (camunda 8 modeler) to my angular application but I was only able to get the camunda 7.

Implemented modeler is as below.
current-ui

These are the libraries I’m using now.

  • "bpmn-js": "^8.8.3",
    
  • "bpmn-js-properties-panel": "^0.46.0",
    
  • "camunda-bpmn-moddle": "^6.1.1",
    

My current view only supports for rest and soap connectors only. So I have tried element connectors with the json files available in camunda doc (connectors json file). Below is my code.

this.bpmnJS = new BpmnJS({
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule
      ],
      elementTemplates: //connectorFIle.json,
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    });

When I run my code only Element Type, Documentation URL and With Icon templates are loading in the drop down as below.
element templates

When I open that json file I saw some zeebe properties. The connectors without “zeebe:” are visible in the UI and others are not. Then I found a library called “zeebe-bpmn-moddle” and I used it instead of using “camunda-bpmn-moddle” thinking I will be able to show all the connectors in my json file. But nothing changed.

  1. So I need to know the difference of “camunda-bpmn-moddle” and “zeebe-bpmn-moddle” libraries and their usage. (Currently I’m thinking it as camunda 7 modeler is using “camunda-bpmn-moddle” and camunda cloud / camunda 8 modeler is using “zeebe-bpmn-moddle”).

  2. Is there any way that I get exact same modeler available in camunda cloud to my angular application?

Hope you guys will help me to clarify above issues.

Thank you

Hi @Thamali_Sathsara ,

the Camunda 8 properties distributed under the zeebe name, not camunda. I can see how this can be confusing.

What you want to do is use ZeebePropertiesProviderModule instead of propertiesProviderModule from bpmn-js-properties-panel as well as add the zeebe moddle extension.

For element templates to work, you also need to add the CloudElementTemplatesPropertiesProviderModule from bpmn-js-properties-panel as an additional module.

Is there any way that I get exact same modeler available in camunda cloud to my angular application?

We have a distribution that already bundles all the relevant modules in the camunda-bpmn-js repo. This already includes the correct element template and moddle modules:

2 Likes

Hi @Martin ,

Thank you for your answer and I got it clearly.

I have just tried what you said and my code is below.

import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
import { BpmnPropertiesPanelModule,
  ZeebePropertiesProviderModule,
  CloudElementTemplatesPropertiesProviderModule } from 'bpmn-js-properties-panel';
import zeebeModdleDescriptor from 'zeebe-bpmn-moddle/resources/zeebe.json';
import connectorTemplate from '../camunda/element-templates/connectors.json';

this.bpmnJS = new BpmnJS({
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        ZeebePropertiesProviderModule,
        CloudElementTemplatesPropertiesProviderModule
      ],
      elementTemplates: connectorTemplate,
      moddleExtensions: {
        zeebe: zeebeModdleDescriptor
      }
    });
<button (click)="save()">Save <i class="fa fa-save"></i></button>

<div #ref class="diagram-container"></div>
<div class="properties-panel" id="properties"></div>

Below is the view I got.
response123

Any reason for not loading the UI properly?

Thank you.

It might be missing some css files, I did not see them in the code you posted. The ones you will most likely need are

bpmn-js/assets/diagram-js.css
bpmn-js/assets/bpmn-js.css
bpmn-js/assets/bpmn-font/css/bpmn-embedded.css
bpmn-js-properties-panel/assets/properties-panel.css
1 Like

Hi @Martin

Thank you so much for your guide and with that I was able to load the UI now.

compare my

But still I cannot see any connectors when I click on template button. Also there are no errors print in my console. (I have included element template json file as elementTemplates cloud-samples.json )

  "bpmn-js": "^8.8.3",
  "@bpmn-io/properties-panel": "0.18.0",
  "bpmn-js-properties-panel": "1.3.0",
  "zeebe-bpmn-moddle": "^0.19.0"

import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
import { BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  ZeebePropertiesProviderModule,
  CloudElementTemplatesPropertiesProviderModule } from 'bpmn-js-properties-panel';
import zeebeModdleDescriptor from 'zeebe-bpmn-moddle/resources/zeebe.json';
import connectorTemplate from '../camunda/element-templates/connectors.json';

this.bpmnJS = new BpmnJS({
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule
        ZeebePropertiesProviderModule,
        CloudElementTemplatesPropertiesProviderModule
      ],
      elementTemplates: connectorTemplate,
      moddleExtensions: {
        zeebe: zeebeModdleDescriptor
      }
    });
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@13.2.0/dist/assets/bpmn-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/diagram-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn-embedded.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn-codes.css">

<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel@1.3.0/dist/assets/element-templates.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel@1.3.0/dist/assets/properties-panel.css">

<button (click)="save()">Save <i class="fa fa-save"></i></button>

<div #ref class="diagram-container"></div>
<div class="properties-panel" id="properties"></div>

Also the I cannot see the properties under General tab (Extension properties and example data). Below are screenshots of the original camunda cloud view and my implemented view.

Camunda-cloud

Implemented view
compare my new

I’m requesting for a guidance to get the missing connectors and the missing properties to my application.

Thank you.

Example data and others are other provider modules, like the example data provider from @camunda/example-data-properties-provider. I would advice to have a look at the cloud implementation camunda-bpmn-js to get an overview of which libraries are bundled. You can also just use the cloud modeler from this package so you don’t have to manually add everything

Hi @Martin
222

This is the view I got. The panel that is coming when I click on the wrench icon has no search bar and connectors are not listed there.

Also the triple dot icon in the left panel is not clickable.

The only way I can select a connector is, click on the wrench icon and then select any task type, go to the property panel and then unlink that template and come back to and click on the three dots which I underlined in below image and select the connector. Then the property panel changes according to the connector type.

333

Also the connector styles are missing and it takes some time to load all the connectors. I need to know whether it is beacuase of I load css files as links as below.

<link rel="stylesheet" href="https://unpkg.com/bpmn-js@13.2.0/dist/assets/bpmn-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/diagram-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn-embedded.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn-codes.css">

<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel@1.3.0/dist/assets/element-templates.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel@1.3.0/dist/assets/properties-panel.css">

<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel/dist/assets/element-templates.css">

My code

import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
import { BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  ZeebePropertiesProviderModule,
  CloudElementTemplatesPropertiesProviderModule } from 'bpmn-js-properties-panel';
import zeebeModdleDescriptor from 'zeebe-bpmn-moddle/resources/zeebe.json';
import connectorTemplate from '../camunda/element-templates/connectors.json';
import {
  CreateAppendAnythingModule,
  CreateAppendElementTemplatesModule
} from 'bpmn-js-create-append-anything';

private bpmnJS: BpmnJS;

ngOnInit(): void {
    this.initBpmn();
  }

initBpmn(): void {
    this.bpmnJS = new BpmnJS({
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        ZeebePropertiesProviderModule,
        CloudElementTemplatesPropertiesProviderModule,
        CreateAppendAnythingModule,
        CreateAppendElementTemplatesModule,
      ],
      moddleExtensions: {
        zeebe: zeebeModdleDescriptor
      },
      elementTemplates: connectorTemplate,
    });

    this.bpmnJS.on('import.done', ({ error }: { error: any }) => {
      if (!error) {
        this.bpmnJS.get('canvas').zoom('fit-viewport');
      }
    });

    this.bpmnJS.on('elementTemplates.errors', function (event) {
      console.log('template load errors', event.errors);
    });
    this.bpmnJS.get('elementTemplatesLoader').reload();

    this.bpmnJS.attachTo(this.el.nativeElement);
    this.loadDiagram(this.file);
  }
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@13.2.0/dist/assets/bpmn-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/diagram-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn-embedded.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.8.3/dist/assets/bpmn-font/css/bpmn-codes.css">

<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel@1.3.0/dist/assets/element-templates.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel@1.3.0/dist/assets/properties-panel.css">

<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel/dist/assets/element-templates.css">



<button (click)="save()">Save <i class="fa fa-save"></i></button>

<div #ref class="diagram-container"></div>
<div class="properties-panel" id="properties"></div>

Any clue guys?

Thank you.

Please update your dependencies, the search is part of diagram-js since v11.0.0 diagram-js/CHANGELOG.md at develop · bpmn-io/diagram-js · GitHub

2 Likes

Thanks a lot @Martin for your time. Working now.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.