Camunda modeler extension - Add new group to properties panel

Developers Modeler
1

Hi,
I’m trying to build a Camunda Modeler extension.
In one of the steps, I need to add a new custom group to the Properties panel.
This group should contain one text input — when the user enters some text there, it needs to be saved in custom attributes.
I was able to create a group but I don’t know how to add custom entries to the group. All examples that I found are not working.

Can you point me to some examples or documentation on how to add such entries to a custom group and then how to save the entered data into the BPMN diagram?
I know about custom moddle — I already have it.

This one is based on camunda-modeler-process-io-specification-plugin/client/properties-panel /process-io-extension-provider.js)


import { TextFieldEntry, isTextFieldEntryEdited, useService } from 'camunda-modeler-plugin-helpers/vendor/bpmn-js-properties-panel';

function CustomTextEntry(props) {
  const { element, id } = props;

  const modeling = useService('modeling');

  const getValue = () => {
    return element.businessObject.get('custom:text') || '';
  };

  const setValue = (value) => {
    modeling.updateProperties(element, { 'custom:text': value });
  };

  return TextFieldEntry({
    element,
    id,
    label: 'Custom Text',
    description: 'Enter some custom text',
    getValue,
    setValue
  });
}

export default class SampleExtensionProvider {
  constructor(propertiesPanel, injector) {
    this._injector = injector;
    propertiesPanel.registerProvider(this);
  }

  getGroups(element) {
    return (groups) => {
      const customGroup = {
        id: 'customGroup',
        label: 'Custom Group',
        // How to define entries and components ?
        entries: [ 
          {
            id: 'customText',
            component: CustomTextEntry,
            isEdited: isTextFieldEntryEdited
          }
        ]
      };

      return [...groups, customGroup];
    };
  }
}

SampleExtensionProvider.$inject = ["propertiesPanel", "injector"];

and the second approach (this one is based on properties-panel-extension/src/provider/magic/MagicPropertiesProvider.js)


import { TextFieldEntry, isTextFieldEntryEdited, useService } from 'camunda-modeler-plugin-helpers/vendor/bpmn-js-properties-panel';

import { html } from 'htm/preact';
import { is } from 'bpmn-js/lib/util/ModelUtil';

function Spell(props) {
  const { element, id } = props;

  const modeling = useService('modeling');
  const translate = useService('translate');
  const debounce = useService('debounceInput');

  const getValue = () => {
    return element.businessObject.spell || '';
  };

  const setValue = value => {
    return modeling.updateProperties(element, {
      spell: value
    });
  };

  return html`<${TextFieldEntry}
    id=${id}
    element=${element}
    description=${translate('Apply a black magic spell')}
    label=${translate('Spell')}
    getValue=${getValue}
    setValue=${setValue}
    debounce=${debounce}
    tooltip=${translate('Check available spells in the spellbook.')}
  />`;
}


const LOW_PRIORITY = 500;

export default class SampleExtensionProvider {
  constructor(propertiesPanel, injector) {
    this._injector = injector;
    propertiesPanel.registerProvider(LOW_PRIORITY, this);
  }

  getGroups(element) {
    return (groups) => {
      if (is(element, 'bpmn:ServiceTask')) {

        const customGroup = {
          id: 'customGroup',
          label: 'Custom Group',

          entries: [
            {
              id: 'spell',
              element,
              component: Spell,
              isEdited: isTextFieldEntryEdited
            }
          ]
        }

        groups.push(customGroup);
      }

      return groups;
    };
  }
}

SampleExtensionProvider.$inject = ["propertiesPanel", "injector"];

But still same result - I see the group but no options after I will expand it

2

I believe what you’re looking for is an example plug-in that ships a BPMN properties panel extension for the Camunda Modeler? Have a look at, i.e this, and the client plug-in registration here.

3

I have also the registration and new group appear on the screen but… I don’t see any options, any text inputs inside that group.
So probably something is wrong with the entries section but I don’t know what