Attempting to create a post it feature in my BPMN, need directions

Developers
1

I am attempting to create a simple post it feature and add it to my BPMN, the BPMN currently has a few customs etc (was not made by me).

I have been reading the Custom Examples and I have so far done the following:

Create it on custom renderer, created it on a custom contextpad, added it to custom palette.

I click on my “post it” and it doesn’t render, I get the following error:

Uncaught Error: unknown type bpmn:PostIt
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.mi.mapTypes (bpmn-modeler.production.min.js:7:36300)
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.mi.getEffectiveDescriptor (bpmn-modeler.production.min.js:7:36468)
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.bi.getType (bpmn-modeler.production.min.js:7:37519)
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.bi.create (bpmn-modeler.production.min.js:7:37354)
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.sm.create (bpmn-modeler.production.min.js:34:231229)
at Object.click (CustomPalette.js:25:1)
at ./node_modules/bpmn-js/node_modules/diagram-js/lib/features/palette/Palette.js.Palette.trigger (Palette.js:316:1)
at HTMLDivElement. (Palette.js:156:1)
at HTMLDivElement. (index.esm.js:454:1)

I have added it to node_modules/bpmn-moddle, just to test if it would stop the error, it didn’t :

…
{name: “PostIt”,
superClass: [“BaseElement”],
properties: [{name: “name”, isAttr: true,type: “String”},]},
…

Where should I go from here to make it work? I would also accept using already-made similar post-it types that I could use instead of making one from scratch

2

@ahmandi This indicates that you did not define an element bpmn:PostIt.

Adding it to node_modules/bpmn-moddle won’t work as you are using a pre-built distribution of bpmn-js, cf. stack trace you published. I suggest you to not use a pre-built distribution:

import BpmnModeler from 'bpmn-js/lib/Modeler';

...

That better sets you up for such experiments, and customizing.

2 Likes
3

Thank you very much for the heads up!

4

I have done the following and now I think I`ve made progress because the error is different:

I`ve created a JSON of postit that looks like this:

{ “name”: “PostIt”,
“prefix”: “postit”,
“types”: [{ “name”: “PostIt”,
“properties”: [{ “name”: “PostIt”, “type”: “String” }]}],
“emumerations”: ,
“associations”: }

And added to my app.js:

import * as BpmnJS from ‘bpmn-js/dist/bpmn-modeler.production.min.js’;
import postItExtension from ‘…/resources/postIt.json’
…
var modeler = new BpmnJS({
…
},
moddleExtensions: {
postIt: postItExtension
},
…

Now when I click my shape to drag it to the board, I get the following error:

bpmn-modeler.production.min.js:7 unhandled error in event listener TypeError: this._renderer(…) is not a function
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.ro.drawShape (bpmn-modeler.production.min.js:27:27225)
at CustomRenderer.drawShape (CustomRenderer.js:39:1)
at BaseRenderer.js:21:1
at bpmn-modeler.production.min.js:7:27481
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.Yn._invokeListener (bpmn-modeler.production.min.js:7:27504)
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.Yn._invokeListeners (bpmn-modeler.production.min.js:7:27328)
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.Yn.fire (bpmn-modeler.production.min.js:7:27015)
at ./node_modules/bpmn-js/dist/bpmn-modeler.production.min.js.ti.drawShape (bpmn-modeler.production.min.js:7:29497)
at CreatePreview.js:47:1
at Array.forEach ()

I have on my CustomRenderer.js the following:

drawShape(parentNode, element) {
var type = element.type;
if (type === ‘postit:PostIt’) {
const color = ‘#52B415’
const rect = drawRect(parentNode, 50, 20, TASK_BORDER_RADIUS, color)
return rect
}
…
return shape}

Additional info:
I also have:

getShapePath(shape) {
if (is(shape, ‘postit:PostIt’)) {
return getRectPath(shape, TASK_BORDER_RADIUS)
}
return this.bpmnRenderer.getShapePath(shape);
}

Should debugging require more information I am more than glad to give

6

Please verify that the element is actually recognized as postit:PostIt.

The right way to do this would be is(shape, 'postit:PostIt'). You could debug what is happening.

1 Like
7

A console.log under:

canRender(element) {
console.log(element, ‘element’)
return !element.labelTarget;
}

Shows me that it is indeed “type: ‘postit:PostIt’”, what I did notice of odd is that under the property:

di.id: “undefined_id”

The others actually have an ID there like “Activity_12x234”…

And a console.log under

drawShape(parentNode, Element) {
const shape = this.bpmnRenderer.drawShape(parentNode, element);
…
if (is(element, ‘postit:PostIt’)) {
const color = ‘#52B415’
const rect = drawRect(parentNode, 50, 20, TASK_BORDER_RADIUS, color)
console.log(rect, ‘postit’)
return rect
}
console.log(shape, ‘draw’)
return shape;
}

Won’t even reach it because I get the error I’ve mentioned in the previous post, while for other working shapes it gives an actual html:

rect x=“0” y=“0” width=“100” height=“80” rx=“10” ry=“10” style=“stroke: rgb(34, 36, 42); stroke-width: 2px; fill: white; fill-opacity: 0.95;”></rect

I kinda got the conclusion that I might have to add it to the actual xml diagram?

<bpmn:definitions
xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
xmlns:bpmn=“http://www.omg.org/spec/BPMN/20100524/MODEL”
xmlns:bpmndi=“http://www.omg.org/spec/BPMN/20100524/DI”
xmlns:dc=“http://www.omg.org/spec/DD/20100524/DC”
id=“Definitions_0c9x2qg” targetNamespace=“http://bpmn.io/schema/bpmn”
exporter=“bpmn-js (https://demo.bpmn.io)” exporterVersion=“9.0.0-alpha.2”>
<bpmn:process id=“Process_1bcfbhn” isExecutable=“false”>
<bpmn:startEvent id=“StartEvent_0ewkcwz” />
</bpmn:process>
<bpmndi:BPMNDiagram id=“BPMNDiagram_1”>
<bpmndi:BPMNPlane id=“BPMNPlane_1” bpmnElement=“Process_1bcfbhn”>
<bpmndi:BPMNShape id=“_BPMNShape_StartEvent_2” bpmnElement=“StartEvent_0ewkcwz”>
<dc:Bounds x=“156” y=“81” width=“36” height=“36” />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

8

Could you switch to the development build of the modeler or use bpmn-js/lib/Modeler directly for a reasonable stack trace that helps us debug further?

Also at this point it likely makes most sense if you share a running code sandbox. Maybe someone can help debugging.

1 Like