Listen to menu event with client plugin in Camunda Modeler

We recently converted a BPMN plugin to a client extension (Use registerClientExtension() instead of registerBpmnJSPlugin() and make the plugin a React component), However, I cannot find a way to listen to the menu event.
Here is the menu.js we have:

module.exports = function(electronApp, menuState) {
  return [{
    label: 'Some action',
    action: function() {
      electronApp.emit('menu:action', 'someEvent');
    }
  }];
};

And it used to work because in the bpmn plugin we can do:

this.editorActions.register(“someEvent”, () => this.someAction());

However, we don’t have the access to the editorActions in a client plugin, how can we listen to the event in a client plugin?

I also tried to change the menu.js and then use ipcRenderer.on() to listen to the event, but it didn’t work:

module.exports = function(electronApp, menuState) {
  return [{
    label: 'Some action',
    action: function() {
     var ipcRenderer = require('electron').ipcRenderer;
     ipcRenderer.emit('menu:action', {}, 'someEvent');
    }
  }];
};

Hi @shannon!

It’s possible to get the editorActions from the modeler inside a Client Extension. You’ll have to listen to the bpmn.modeler.configure event and then register your bpmn-js extension. You can have a look at this example. It’s showcased how to register bpmn-js-extension via a client extension. Inside that, you would be able to register new actions.

Feel free to ask further questions if you need help

Thank you for the response @Niklas_Kiefer! I tried the example and I am able to listen to the events now. But the problem is that when there is no BPMN tab open, the event won’t be triggered, is there a way that we can call ipcRenderer.emit in the menu.js so the client extension can listen to the event even if there is no BPMN file open?

That should be possible if the node integration is enabled. Since version v3.3 we disabled this per default for security reasons. It can be enabled via --dangerously-enable-node-integration flag.

The other question is: what event do you want to execute if no bpmn tab is open? How should that look like / what is it supposed to do?

We are adding a tree-like library to the modeler, so the user can set their default library folder and switch between the BPMN files easily.
The event is to set the folder path of the library, even if there are no open BPMN files, the user should be able to set their library folder path.
image
Once we enable the node integration, how do we access the ipcRenderer in menu.js?
Thank you!

The event is to set the folder path of the library, even if there are no open BPMN files, the user should be able to set their library folder path.

Where do you listen to this event?

the ipcRenderer is something which goes inside the client. The menu.js will be executed in the electron main process, cf. ipcMain docs

We are listening to the event in a React component which is used as a client extension.
Hmm, the problem is that ipcMain doesn’t have an emit function so I cannot use it to trigger the events.

I think I got it to work by using

electronApp.mainWindow.webContents.send(‘some-event’);

Thanks for the help!

1 Like

How you connected the react component to the menu.js? I am developing same kind of plugin in camunda modeler.