Update ElementTemplate values in custom props panel

Developers
1

Hi! I built a custom properties panel. I update the fields this way:

				this.modeling.updateProperties(this.element, {
					[this.fieldToUpdate]: value
				});

Now, while I can successfully add an element template to an element using the following:

				modeling._commandStack.execute('propertiesPanel.camunda.changeTemplate', {
					element: this.element,
					newTemplate: selectedTemplate,
					extensionElements: this.formBuilder.array([])
				});

I have NOT been able to update the fields from the element template using the same first method “updateProperties”. Could you please inform how i update the element template properties? I mean it is possible Im just not correctly attaching the template to begin with. But when i download the xml it looks like it’s there…

2

Hi @justcoding ,

what do you mean with

I have NOT been able to update the fields from the element template using the same first method “updateProperties”

?

An element template is basically a configuration in json defining a template that can be applied to an element. Hence you cannot update the fields from the element template using modeling.updateProperties.

What you should be able to do is the following:

  1. Apply an element template to an element (as you described)
  2. Now the element will have the pre-defined values as defined in the template
  3. Now you can update the values of the element again (overwriting the values the template has set previously)
3

Thank you. I see what you mean, and now that i read this it is quite obvious. However what I don’t understand is how to pkg the changes in the panel for the modeling._comandStack.exucute method (what i have in the example is this.formBuilder.array([]) which is definitely not right). Do I create a moddle? like moddle.create(‘bpmn:ExtensionElements’), i did that and while it doesnt error out, it also doesnt update anything.

onUpdateTemplate (id: string) {
        if (this.etForm.controls[id].valid) {
            const values = this.etForm.value;
            const newExtensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements', values);
            const templates =  Object.values(this.modeler.get('elementTemplates')._templates).map(opt => opt[1]);
            const template = templates.find(t => t.id === this.element.businessObject.modelerTemplate);
            const modeling = this.modeler.get('modeling');
            modeling._commandStack.execute('propertiesPanel.camunda.changeTemplate', {
                element: this.element,
                newTemplate: template,
                extensionElements: newExtensionElements
            });

        }

    }
4

Hi @justcoding ,

can you please describe the use-case again / explain what you want to achieve in the end? I think I don’t fully get it yet.

Thanks

5

Hi, Thank you, use case is I’ve built an angular custom props panel, with a form which users can update the input fields, add apply an element template and update the template values, at which point the “onUpdateTemplate” get’s called. I know how to update the element name, documentation id etc, but when it comes to the element templates updates you said i have to use modeling.commandStack.execute but I am unsure what to pass to extensionElements.

6

Okay so:

  • There is no way to update the element template itself. As stated in my previous post, the element template itself is a static resource. However, you can modify the properties of the element after an element template was applied to it.
  • If you want to find out more about how to update properties of an element using our APIs, check out this example (in particular editing elements)