What is the preferred way to restrict the dropdown options from modeller tabs?

Developers Modeler
1

We want to limit some of the dropdown options. Say remove ‘Java class’ and ‘Script’ from the execution listener. What’s the preferred approach to have these modifications in properties panel. Any references / examples around these ?

image

2

Hi @Tushar_Londhe ,

I am not aware of a dedicated example.

I would just use CSS to hide the respective options. For example:

select[name="implementationType"] option[value="connector")] {
  display: none;
}

If you use the propertiesPanel inside a custom application, you can just add the style there. If you use it as part of the Camunda Modeler you can inject the stylesheet with a style plugin.

Alternatively you could overwrite and alter the actual implementation of the Implementation type component, but I think the CSS approach also does the job and is just easier and quicker.

1 Like
3

Thanks @maxtru , we will try out the CSS approach.

Any example of using the properties panel inside custom application ?

4

You could look at this example: bpmn-js-examples/properties-panel at master · bpmn-io/bpmn-js-examples · GitHub.

Or look at GitHub - camunda/camunda-bpmn-js: Embeddable Camunda modeling distributions based on bpmn-js, which is a distribution of bpmn-js, which includes the properties panel already.

1 Like
5

okay, thanks for the references

6

Hi @maxtru ,
Thanks for pointing out the css solution for hiding the options.
I was able to hide both the options (Java class and Script) but as we click on create button in the “Execution listeners”, it create the listener with “Java class” option.
We tried even removing the “Java class” option using dom select query, still it creates the option as Java class.

image
image

We even tried overriding the “camundaModdlePackage” from “camunda-bpmn-moddle/resources/camunda”, but still the “Java class” option comes up.

Any other option to hide the “Execution listeners” option, specially the “Java class” one??

7

Hi @moiz,

I see.

So basically the problem is that when one creates a new Execution Listener entry, we do this:

    const listener = bpmnFactory.create(listenerGroup, {
      event: getDefaultEvent(element, listenerGroup),
      class: ''
    });

The property class makes this a Java Class listener. So we set a Java Class by default.

What you probably want is to set an expression per default. So you would need to change that piece of code to:

    const listener = bpmnFactory.create(listenerGroup, {
      event: getDefaultEvent(element, listenerGroup),
      expression: '' // <- Changed!
    });

…(and then again hide the unwanted options with css).

In order to achieve that, you would need to:

  1. Implement a custom properties provider, which basically just overwrites the Listeners group with the exact same code of the existing Listeners group, but the change in that line of code. See basic extension example
  2. Fork bpmn-js-properties-panel and just change that piece of code (not recommended)

(Please note that the line of code I referenced is based on the latest prop panel release, while you appear to be using the old one) (see blog post → new properties panel)

8

Thanks @maxtru. Will update to newer version of modules and try out the code.

9

Hi @maxtru ,

When you say “Fork” the bpmn-js-properties-panel, do we pull in all the individual source code files of properties panel from the repo GitHub - bpmn-io/bpmn-js-properties-panel: A properties panel for bpmn-js.?
OR
Can we copy installed module “\node_modules\bpmn-js-properties-panel\dist\index.esm.js” and update the piece of code with fix?

10

Hi @moiz,

for development setup I would recommend to:

  • clone the repo locally
  • change the code as desired. Run npm run all to test and build locally
  • Locally link the local package using npm link. See for example this tutorial

Best
Max