Add specific implementation for nyan cat example


#1

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


#2

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

Have you checked out this example?


#3

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


#4

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.


#5

Thanks Philipp. That helps a lot.


#6

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?


#7

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


#8

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.


#9

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