Camunda Modeler Client Extensions

Camunda Frontend Chapter 11th November 2019

Transcript

1. Creating Camunda Modeler Plugins Maciej + Niklas bpmn-io
2. Goals & Motivations What we have • Ability to create plugins for bpmn-js and moddle extensions. • We could not touch the Camunda Modeler UI (at least not via any API), powered by React • Documentation: https://github.com/camunda/camunda-modeler/tree/develop/docs/plugins
3. The Original Way https://github.com/nikku/camunda-modeler-plugins-talk-2019
4. Goals & Motivations What we have • Ability to create plugins for bpmn-js and moddle extensions. • We could not touch the Camunda Modeler UI (at least not via any API), powered by React • Documentation: https://github.com/camunda/camunda-modeler/tree/develop/docs/plugins What we want • Build extensions for the actual Application • Include stuff like buttons, modals, … • Get access to the configuration • Know when the Application is doing stuff (listen for events) • Use React Components | Hooks
5. How does it look like module.exports = { name: 'My Awesome Plugin', // the name of your plugin style: './style.css', // changing the appearance of the modeler menu: './menu.js', // adding menu entries to the modeler script: './script.js' // extend the modeling tools }; Source: https://github.com/camunda/camunda-modeler/tree/develop/docs/plugins#plugging-into-the-camunda-modeler
6. How does it work (shortly) <App> … <PluginsRoot app={ this } plugins={ this.plugins } > … { this.plugins.map(PluginComponent => (<PluginComponent triggerAction={ … } config={ … } subscribe={ … } log={ … } displayNotification={ … } />)) } </App> <Slot name="toolbar" /> <Fill slot="toolbar" group="8_deploy"> <Button onClick={ this.deploy } title="Deploy Current Diagram" /> </Fill>
7. <Demo />
8. APIs used for the presentation 1. Add UI Extension 2. Add a button 3. Open a modal when button is clicked 4. Save and load config for the plugin 5. Use the UI Extension to extend the BPMN Modeler
9. Inspiration and Guidance Client Extensions Examples Autosave Plugin Camunda Modeler Plugins Collection Camunda Modeler 3.4 Release Blog Post
10. Thank you