Trigger a model file save from within a Camunda Modeler Plugin

Users
1

Hey folks.

I want to trigger “save” for the current tab within a Camunda Modeler Plugin. I tried looking into camunda-modeler-autosave-plugin/AutoSavePlugin.js at main · pinussilvestrus/camunda-modeler-autosave-plugin · GitHub, but this uses a React component, which I don’t have. How can I get access to this “triggerAction” from a “normal” plugin built like GitHub - camunda/camunda-modeler-plugin-example: Plugin example for the Camunda Modeler. Use this as a starting point for creating your own plugins.? Or is there another way to do this?

Thanks a lot
Bernd

2

Since you’re creating a bpmn-js extension, there is no context for the current tab. One possibility to get it would be to wrap your extension inside a client extension.

There you would have access to the triggerAction

constructor(props) {

  super(props);

  const {
    triggerAction
  } = props;

}

Inside your bpmn-js extension, you could then fire an event for your action.

function MyExtension(eventBus) {

  // fire this once you want to save the tab
  eventBus.fire('saveTab');

}

EditorEventsLogger.$inject = [ 'eventBus' ];

And then listen for it in the React part

const {
  triggerAction,
  subscribe
} = props;

subscribe('bpmn.modeler.created', (event) => {

  modeler.on('saveTab', (event) => {    
    triggerAction('save');
  });

});

Something like that should be possible.

3

Hi Niklas.

A client extension is still part of a Modeler Plugin - right?

Do I understand it right, that camunda-modeler/TestEditorEventsLogger.js at develop · camunda/camunda-modeler · GitHub in your example is the “bpmn-js extension” which is then wrapped into the “client extension” in camunda-modeler/index.js at develop · camunda/camunda-modeler · GitHub?

Thanks a lot
Bernd

4

Do I understand it right, that camunda-modeler/TestEditorEventsLogger.js at develop · camunda/camunda-modeler · GitHub in your example is the “bpmn-js extension” which is then wrapped into the “client extension” in camunda-modeler/index.js at develop · camunda/camunda-modeler · GitHub?

Exactly :+1: Note that (currently) in the example the index file for the bpmn-js extension is missing.

Inside the entry point of the plugin, the client extension would then get registered instead of the normal bpmn-js plugin.

5

Hi Niklas.

Unfortunately, I seem to miss something. I deactivated the client extension - but you can see the code I tried here: camunda-platform-to-cloud-migration/ConvertToCamundaCloudClientExtensionIndex.js at main · berndruecker/camunda-platform-to-cloud-migration · GitHub and here: camunda-platform-to-cloud-migration/ConvertToCamundaCloudClientExtension.js at main · berndruecker/camunda-platform-to-cloud-migration · GitHub

I get an error:

ERROR in ./client/ConvertToCamundaCloudClientExtension.js
Module not found: Error: Can't resolve 'camunda-modeler-plugin-helpers/react' in 'C:\DEV\Camunda\camunda-platform-to-cloud-migration\camunda-modeler-plugin-platform-to-cloud-converter\client'
 @ ./client/ConvertToCamundaCloudClientExtension.js 6:0-69 20:66-79
 @ ./client/ConvertToCamundaCloudClientExtensionIndex.js

Any ideas?
Does the code look OK from your perspective?

6

We finally solved that problem now in a quick Zoom session:

  1. I need to reference the right “client.js” created by Webpack in my index.js: camunda-platform-to-cloud-migration/index.js at main · berndruecker/camunda-platform-to-cloud-migration · GitHub
  2. I no longer need to register the bpmn extension, but just return the module: camunda-platform-to-cloud-migration/ConvertToCamundaCloudPluginIndex.js at main · berndruecker/camunda-platform-to-cloud-migration · GitHub (as it is registered by the client extension itself: camunda-platform-to-cloud-migration/ConvertToCamundaCloudClientExtension.js at main · berndruecker/camunda-platform-to-cloud-migration · GitHub)

Thanks Niklas!