Create new types

Developers Modeler
1

Hello,
I wanted to ask if and how it is possible to define new types. For example a new bpmn:IntermediateThrowEvent2, which has the same features as bpmn:IntermediateThrowEvent, but you can customize it.

2

No, bpmn:IntermediateThrowEvent2 is not a valid BPMN element. Use extension elements for this purpose. Have a look at this comprehensive example of customizing: https://github.com/bpmn-io/bpmn-js-example-custom-elements

3

I’ve tried different things now, but it doesn’t work. I don’t know either if I’m defining a new type where I can assign him.
For example at the properties-panel extension, where I can assign BewitchedStartEvent to a custom element

4

Can you describe in high level terms what kind of customization you want to achieve?

5

I have created a custom element, in this case a circle in the CustomRenderer.
Now I wanted to add it to the CustomPalette and wrote the following code:

'custom-circle-yellow': createAction(
      'custom:BewitchedStartEvent', 'custom', 'icon-custom-circle-yellow'
    ),

But if I drag it into the diagram no XML code appears, although BewitchedStartEvent was defined in magic. json and since it is a custom element, you have to have Element as superclass, because I still want to keep the properties of the StartEvent without replacing the current one.

magic.json:

{
  "name": "Magic",
  "prefix": "magic",
  "uri": "http://magic",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "BewitchedStartEvent",
      "extends": ["bpmn:StartEvent"],
      "superclass": ["Element"],
      "properties": [
        {
          "name": "spell",
          "isAttr": true,
          "type": "String"
        }
      ]
    }
  ]
}
6

You’re confusing two things here: Custom non-BPMN elements and custom BPMN elements. A yellow circle is a custom element in the sense that it’s not part of the BPMN and therefore you can’t expect it to show up in the exported XML. I guess you’ve been looking at this example: https://github.com/bpmn-io/bpmn-js-example-custom-shapes It’s very likely that this example is not what you’re looking for. What is your yellow circle supposed to represent?

7

The yellow circle shall become a BewitchedStartEvent, which later can only connect to subprocess. But I want to keep the default startEvent.

8

Forget about the custom shapes example then. It’s something completely different. You’d want to add a model extension that adds custom attributes or extension elements to the start event. Have a look at this example: https://github.com/bpmn-io/bpmn-js-example-custom-elements#creating-a-model-extension

9

I have looked at the example, unfortunately I do not yet know how to reach my goal correctly.
What I want to program:
A yellow circle, which is a StartEvent, but also with additional attributes, for example spell. However, I don’t want to change the default start event.
Hope you can help me especially for this case:)

10

That’s exactily what the custom elements example is about: https://github.com/bpmn-io/bpmn-js-example-custom-elements

  1. Add model extension to add custom properties to your start event
  2. Add custom palette entry to create your custom start event
  3. Render your custom start event differently from the normal start event

What exactly are you struggling with?

1 Like
11

The problem I already have is to connect custom Elements example to the properties panel so I can download the XML code. Somehow this doesn’t work with the two containers.
I also looked at the two examples.