Need help in integrating bpmn property panel extension list with angular

yashwardhan_s · October 23, 2023, 8:23am

Hi, I have been following this Link to add custom properties extension list in my angular project.

for this I have copied the magic folder.
I am facing this error.

Any help would be appreciated.

before that I have referred link to setup the modeler and property panel in angular.

Martin · October 26, 2023, 8:30am

it looks like we did not update the example to work nicely with tools that also use JSX. Have a look at the normal properties-panel-extension and how it uses htm to wrap the JSX.

github.com

bpmn-io/bpmn-js-examples/blob/main/properties-panel-extension/app/provider/magic/parts/SpellProps.js#L35-L43


      
          return html`<${TextFieldEntry}
            id=${ id }
            element=${ element }
            description=${ translate('Apply a black magic spell') }
            label=${ translate('Spell') }
            getValue=${ getValue }
            setValue=${ setValue }
            debounce=${ debounce }
          />`

Basically, what is happening here, your JSX compiler for Angular is trying to compile the Component from the properties panel extension, which is a Preact component, and fails. By wrapping it with htm, you do not need a JSX compiler for it to work.

Let me know if the properties-panel-extension works for you.

Cheers!

Martin · October 26, 2023, 8:40am

FYI: I created a PR in the examples repository to use htm:

You can try out the branch in your project