Create separate lett panel on camunda modeler & push custom error messages through plugins

Hi there,

I would like my client extension to add a panel on the left of the modeler. Basically similar to the properties panel on the right. I tried to follow the “slot” approach, but sadly I was only able to find some for tabs, status bar or bottom panel. Is there any other integration point I could use?

image

Also is there a way to push custom error messages or warnings to the problems tab ?

@barmac @nikku @Martin @philippfromme

Is there any input here team @barmac @nikku @Martin

I am stuck with this issue

Hi,

Unfortunately, there is no API to add a panel on the left hand side. Can you tell more about your use case? Is this panel intended to be for the entire app or only a single diagram?

Regarding the problems panel, this is driven by the linting feature. Check out the custom linter rules plugin to see how this can be integrated: GitHub - camunda/camunda-modeler-custom-linter-rules-plugin: Add custom lint rules to the Camunda Modeler

It’s for the entire app, we are looking to develop a panel to display project structure similar to the project explorer tab in eclipse or IntelliJ.

Also regarding the linting feature, can we use that for displaying even custom errors that aren’t related to node, for example if the plugin I developed throws any error, I want to catch that and display jt ? I was wondering if we can directly inject reporter or other service into existing plugin to push warnings or errors to problem window, is that possible ?

In that case, I can only see this happen via some sort of hacking the DOM. Notice that if you imperatively add a panel in the editor view, React may remove it anyway. So the solution will be quite vulnerable.

Linting is typically diagram-related. Perhaps log or displayNotification passed to the plugin serve the purpose better? camunda-modeler/client/src/app/plugins/PluginsRoot.js at develop · camunda/camunda-modeler · GitHub

Or you could perhaps develop a custom tab in the bottom panel, cf. camunda-modeler/client/src/app/panel/Panel.js at c17a183618507a335f61901c803608e79340acd8 · camunda/camunda-modeler · GitHub

Yes I already tried react dom it works well on dev but on prod version of the app the component is not getting rendered as expected, okay so yeah bottom panel was an option on my mind but I wanted to check if there are ways to display on the left side near to the palette.

Let me check with the displayNotification and get back !!

I tried using display notification service it works as expected but I am more inclined towards problems tab, is there a way to report error or warning which aren’t essentially lint error but custom errors ?

I can see we call reporter.report method to push the error, by any means can we inject and use this directly in our plugins @barmac ?

i tried the following upon bpmn,modeler.created action

modeler.get(‘linting’).showError({
category: ‘error’,
id: ‘bar’,
name: ‘Bar 2’,
message: ‘bar 2 error’,
rule: ‘bar-rule’
})
};

but i dont see the message in the problems tab
Can u help here @barmac

I’m afraid we are now in the hacking stage. The problems panel is meant to provide validation information for a specific diagram, and the way to implement it is via linting rules: GitHub - bpmn-io/bpmnlint: Validate BPMN diagrams based on configurable lint rules.

Have you tried to implement a custom bottom panel tab? Create separate lett panel on camunda modeler & push custom error messages through plugins - #6 by barmac

Okay I see, then will go with the bottom panel approach as you mentioned, by any means are we controlling the max height of the bottom panel, as I am not able to expand the panel beyond a point

The maximum height of the bottom panel is not customizable.

We could consider to add a dedicated slot for the left panel.

@Navein_Kumar Please create an issue - Issues · camunda/camunda-modeler · GitHub.

1 Like