Extending properties: using modeling.updateProperties parametrically

I’m rewriting a custom Modeler that was built with the old version of bpmn-js-properties-panel a couple of years ago. It’s got quite a lot of very simple custom properties, so I wanted to parametrize them instead of making a new class for each component as is done in the example. I have most of it working, except for the setValue() function:

return modeling.updateProperties(element, {
      spell: value

How can I handle modeling.updateProperties and parametrize “spell” to be whatever I want? I can’t find any documentation (or for that matter the source code for the modeling service) so I’ve been a bit at sea. (This is sort of another question, but if anyone can point me to where the services are actually written that would also be helpful)

Excuse me for not being able to test this, but I literally bumped in to BPMN.iO 25 minutes ago :slight_smile:

As I think this might be a pure javascript/JSON-question - how about this? Does it work?

const dynamicName = 'correctSpell';
const myValue = 'some value';

const dynamicJSONInAString = `"{ ${dynamicName} : ${myValue} }"`;

const myDynamicJson = JSON.parse(dynamicJSONInAString);

// alert(myDynamicJson);

return modeling.updateProperties(element, myDynamicJson);

And please, if you don’t mind, share your extension code as one of the things we are searching for when choosing a new platform is to easily be able to save custom properties.

1 Like

You’re right, this worked! Thank you so much, I don’t have much experience with javascript so I couldn’t work out what I was seeing. My code is 90% the same as the code in the example, except that I modified the Spell function to handle any property ID. (prettyLabel just adds spaces and an initial capital to the label.)

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

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

  const getValue = () => {
    return element.businessObject[id] || '';

  const setValue = value => {

    const dynamicJSONInAString = `{ "${id}" : "${value}" }`;

    const myDynamicJson = JSON.parse(dynamicJSONInAString);
    // alert(myDynamicJson);
    return modeling.updateProperties(element,  myDynamicJson);
  var prettyId = prettyLabel(id);

  return <TextFieldEntry
    id={ id }
    element={ element }
    label={ translate(prettyId) }
    getValue={ getValue }
    setValue={ setValue }
    debounce={ debounce }

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.