Add specific implementation for nyan cat example



I am using nyan cat example (, 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.



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 ( 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?



Have you had a look at how the example implements creating custom shapes using the palette? Have a look at:

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.


Thanks Philipp. That helps a lot.


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, 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.