How do I add a new icon in this menu

[Harshil_Dalal]

I wanted to ask that how can i add a new custom icon here in this menu.

[Martin]

bpmn-io/bpmn-js-example-custom-controls/blob/master/app/custom/CustomContextPad.js

[Harshil_Dalal]

Hi,@Matrin
Can you convert this into function component so that I can use hooks in it ?

If Yes please rewrite the solution.

Thanks You

[Martin]

EDIT: removed because of wrong information.

This is not a react component. While you can make it a funciton, I would not recommend it

[Harshil_Dalal]

@Martin ,
I am kind of new to bpmn. Can You help in conversion, as i want to use useStore() here

[Martin]

This is not a React component, but a default JavaScript Class with methods. As per our convention, you need getContextPadEntries when registering a new Context pad provider.

You can achieve the same with a function and __prototype__. As this is a bpmn-js extension, it does not use react and you can not use React hooks in it.

[Harshil_Dalal]

@Martin
So let’s say if I want to open a Dialog box on the click of this icon the what should i do ?

[Martin]

This depends on you usecase. You have multiple options:

• Use the PopupMenu
• Render a custom micro-frontend, e.g. using Preact (Example in the PopupMenu)
• Use native JS and HTML, like alert() or confirm()

[Harshil_Dalal]

@Martin , Thank you so much for your time.

[Harshil_Dalal]

@Martin , I have created my own Dialog box and want to open it on the click of this button
Can you guide here ?