Add specific implementation for nyan cat example

Hello,

I am using nyan cat example (https://github.com/bpmn-io/bpmn-js-nyan), and I can perfectly integrate it inside my project. I know nyan cat is used for service tasks. Now I need to specify implementations for these service tasks, my goal is to create “multiple nyan cats”, each one with a specific implementation. Is that possible? if so, please guide me through the steps to achieve this goal.

Thanks

What are you trying to do? Are you trying to customize elements?

Have you checked out this example?

Thanks for your response and for the example.

First, I m using properties-panel example as a starter for my project ( https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel). With this, I can create service tasks and set the implementation using the properties-panel. Now, I would like to extend the palette by adding custom tasks (service tasks + their specific implementation ), so the user can select these tasks without the need to set manually the implementation in the properties panel.

With Nyan cat example and your example, I can extend the palette with an icon for service task, now how to set the implementation?

Thanks

Have you had a look at how the example implements creating custom shapes using the palette? Have a look at: https://github.com/bpmn-io/bpmn-js-custom-elements-example/blob/master/app/emoji/EmojiPaletteProvider.js#L181

When a new custom shape is created from the palette its custom property emoji is set immediately:

var businessObject = bpmnFactory.create('bpmn:Task');

businessObject.emoji = '🤗';

return elementFactory.createShape({
  type: 'bpmn:Task',
  businessObject: businessObject
});

You could also modify BpmnFactory to set custom properties upon element creation or implement a CommandInterceptor that achieves the same.

1 Like

Thanks Philipp. That helps a lot.

1 Like

Hi @philippfromme, I was able to create multiple custom service tasks in the palette by setting custom properties for each one (setting business Object to the custom property), and each one with a particular icon/image. Now, I want to get these images when I draw these custom tasks (like for nyan cat). And I m supposing I need to test the businessObject since all these tasks are of type Service Task.

I tried something like this but it didnt work:

var bo = element.businessObject;
if (type === ‘bpmn:ServiceTask’ && bo.customproperty === ‘value1’ ) {
return this.drawCustomTask1();
}

if (type === ‘bpmn:ServiceTask’ && bo.customproperty2 === ‘value2’ ) {
return this.drawCustomTask2();
}

any help please?

Where is this code example from? Are you implementing a custom renderer?

I m trying to modify custom elements example https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-elements, but instead of creating a triangle and a circle I created custom service tasks each one with a specific property. The custom tasks are created in the palette using the code you suggested from the emoji example.

Have you had a look at EmojiRenderer? It renders a task differently if it has the emoji property.

1 Like

did the emoji example moved else where because we are getting a 404 for https://github.com/bpmn-io/bpmn-js-example-custom-elements/blob/master/app/emoji/EmojiRenderer.js ?

Yes, we refactored our custom elements examples a bit and it seems the EmojiRenderer got removed.

Hallo Everyone
I’m trying to insert custum elements into camunda but I don’t get it.audioEvent collectorEvent ![imageEvent|16x16]
these are image i try to insert. can someone help me with the code make it?
Thanks,

Please do not necrobump old topics. Instead link to this thread from new topic.