Extending properties: using modeling.updateProperties parametrically

[kirstenhh]

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)

[DavidRudolf]

@kirstenhh

return modeling.updateProperties(element, {
      spell: value
   });

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

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.

[kirstenhh]

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);
    console.log(myDynamicJson);
    // 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 }
  />
}