How do i create custom form field type

I am currently working on a web application that uses bpmn-js node package and also i am using the bpmn-js-properties-panel and camunda-bpmn-moddle to get something like this.

The functionality i’m trying to add is that whenever the userTask is selected i want to add more types to the form field type here

and also add more input fields below based on the type chosen.

Pls help me. I’m in desperate need of a solution.
Thanks and i appreciate all the help

Hello @etinosa ,

it seems like what you are looking for is a custom extension of bpmn-js-properties-panel. This definetly would require some basic javascript knowledge.

To create a new label You just neeed to create a new functional component i.e

export function MyComponent(props) {
... your business logic ...
}

in which you should create a custom TextFieldEntry like

  return TextFieldEntry({
    element,
    id: 'myLabel',
    label: translate('This is myLabel'),
    description: translate('Describe myLabel.'),
    getValue,
    setValue,
    debounce
  });

Basically the implementation of the logic above can be followed according to the already existing react-components.

Then, all there is left is to register this component in one of the …PropertyProvider… components, which is a custom approach for this project (just review the code) and to export it in index.js through export { MyLabel } from './MyLabel';.

Please have a look at the code base and try to understand the concept. Once You have something and You will still feel like you need some support or guidance, please do not hesitate to share the link to the github repository of your solution. I will try to assist You as much as I can.

1 Like