Autopopulate Property Panel on dragging ( Name, Description)


I want to have the Name, Element Description to be auto populated on Property
Panel once they are done dragging.
I have build our modeler from following the example of properties-panel.

I see answers referring to element templates, but not sure on the setups needed for it.

How to target the name , description ( and if possible other features too in future) and change them in BPMN

I saw an article regarding this, but its from 2017 and outdated, :point_right: adding-custom-elements-to-bpmn-properties-panel.

Anyone familiar with latest method ?

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:


Here is my Sandbox Link,
My project
(If you need edit permission, Please let me know)

Please see the image below,

My goal here is,
Once i select a task, Let’s say Service Task,
My Extension Listener in property panel should be auto populated with
the data i provide from back end.
For example,
The Java class should be ‘Class 1’ without having the need to type it there by user. (Now its empty by default)
I also would like if some properties can be enabled or disabled as user wishes.

Thanks for the support :rose:

Why does an element need to be changed when selected? How about if it had the properties when you create it?

1 Like

By ‘element’, I guess you would mean the fields in property panel, right ?
and yes, If it has the properties when creating, it would also be fine :+1:
(My assumption may be wrong, but I want these properties which exist in Camunda Properties Provider to be created by default , and not a entirely new properties provider )
Please brief on the method possible ( if a step by step procedure or a link to similar project is there , Would be very useful for the community also :blush:)

Gentle Reminder,
If there is a method or option (A step by step would be nice),
Please do reply :rose:

Have you seen the custom controls example? You can create complex elements directly from the palette.

So the task you create could be:

    function createServiceTask(event) {
      const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask', 'camunda:asyncBefore': true });

      create.start(event, shape);

I had already tried custom controls example and
Now I added your code.

May I know what extra behaviour did you expect when “‘camunda:asyncBefore’: true” is to be added ?

here is my updated screen shot, :point_down:

None of the fields are generated etc,

Is there a way to add name/element description/java class atleast via the method you told?
If so how ?

(Thanks again for the input :rose:)

Any update on this ?

Is this same achievable by form-js ?

Hey, sorry for delay in responding. I tried to show how to implement it on your codesandbox but I can’t get it running.

Generally, the palette click handler should like the following:

    function createServiceTask(event) {
      const shape = elementFactory.create("bpmn:ServiceTask", {
        "camunda:async": true

      create.start(event, shape);
1 Like

Okay but what behaviour will change do you expect ?

Is this enough to give default value to any of these properties ? :point_down:


(btw the above code runs error for me ,)

It gives the error :point_down:

This issue is solved here, setting-default-values-in-extension-properties-of-properties-panel

Huge thanks to @barmac @philippfromme :bouquet:

1 Like