Trigger elementTemplate-chooser set function

I set the value of elementTemplate through businessObject.set.

elementShape.businessObject.set(
  "camunda:modelerTemplate",
  this.selectedTaskId
);

It set the value in the UI also, the properties releated to the selected template is populating. But, the XML is not having the properties (extensionElements and camunda:inputOutput node). I’m getting as below.

 <serviceTask
  id="Task_0rciwng"
  camunda:modelerTemplate="com.camunda.example.MailTask" 
  camunda:class="com.mycompany.MailTaskImpl" />

But when the value is changed from UI (mouse select or change) the properties are binding. It triggers the set method from elementTemplate-chooser.

image

How to trigger the set function from selectBox or fire PropertiesPanel.prototype._bindListeners method explictely?

Any advise or guidance would be greatly appreciated…!!

Have you tried using the modeling API instead? There’s no need to set the property directly on the business object.

modeling.updateProperties(element, {
  'camunda:modelerTemplate': templateId
});
1 Like

Thank you @philippfromme. It is working fine. Based on this, the item from element template is choosing and Custom fields related to the selected item is listing as below

image

But when download the XML file. It is not having the custom field nodes inside <serviceTask>. The solution is not triggering the PropertiesPanel.prototype._bindListeners method internally.

Result:

<serviceTask id="Task_04c48cd" camunda:modelerTemplate="EmailTask" rt:groupName="COMMS" />

Expected Result:

  <serviceTask id="COMMS" camunda:modelerTemplate="EmailTask" rt:groupName="COMMS" camunda:class="EmailTask">
      <extensionElements>
        <camunda:inputOutput>
          <camunda:inputParameter name="sender">no-reply@test.com</camunda:inputParameter>
          <camunda:inputParameter name="receivers">test@test.com</camunda:inputParameter>
          <camunda:inputParameter name="messageBody">
            <camunda:script scriptFormat="freemarker">Hello ${firstName}!</camunda:script>
          </camunda:inputParameter>
        </camunda:inputOutput>
      </extensionElements>
    </serviceTask>

The same is generated when manually select the ElementTemplate.

I have the same problem. You don’t need to trigger PropertiesPanel.prototype._bindListeners, but the function handleChange(event) method. You can achieve this with the following rows:

var event = document.createEvent('Event');
event.initEvent('change', true, true);
document.getElementById('camunda-elementTemplate-chooser-select').dispatchEvent(event);

Unfortunately this is still not enough to persist the custom fields into bpmn. Something else is responsible for this. You can see this if you debug the UpdatePropertiesHandler.prototype.execute method.
In our case it will be called only once, but if you manually select a value from the selectbox it will be called more than one time and you can also see the custom properties in one of the objects.
I hope I could help and I hope someone can help us to completely solve our problems. How to persist the custom fields in the upper scenario?
Thank you!

I solved it!
Don’t use updateProperties, just these lines are needed, which will set the neessary option and then trigger a change event on the select element. This way your custom fields will be saved.

document.querySelector('option[value="elementTemplateId"]').selected = true;
var event = document.createEvent('Event');
event.initEvent('change', true, true);
document.getElementById('camunda-elementTemplate-chooser-select').dispatchEvent(event);

Sorry, didn’t understand your question correctly. What you want to do is to trigger the ChangeElementTemplateHandler.

commandStack.execute('propertiesPanel.camunda.changeTemplate', {
  element: myElement,
  oldTemplate: myOldTemplate // optional
  newTemplate: myNewTemplate
});
1 Like

I suppose to set the elementtemplate value dynamically. That was implemented by setting the value in the businessObject. Code as follow.

It set the value in the PropertyPanel (UI) but the same is not reflected in the downloaded XML. Please refer the below gif image for the same. When user interaction happened with the element custom fields, then only the XML is updated with <extensionElements>.

element_template

How to get the <extensionElements> in XML on dynamic set of element template.

Using elementShape.businessObject.set( “camunda:modelerTemplate”, this.selectedTaskId ); will ONLY set the camunda:modelerTemplate property. It will NOT set all the properties that are defined in your template.

Can you guide me on the requirement please.

How it can be achieved?

I posted that already:

1 Like