Create proprieties in custom panel after filling a form

Developers
1

Greetings,
I want to update the properties panel by filling a form.
I want that the user filling a form contains ( type: like bpmn:Gateway, bpmn:process, connectorGroup, label, modelProperty) then submit it.
while launching the front application ( I’m using ReactJs ) it will load a custom properties panel from the database.
Is that possible, please?

2

I think what’s important to understand is that the bpmn-js-properties-panel is just displaying what it gets from the underlying BPMN 2.0 XML definition. If you update the currently selected element, the properties panel will react on these changes.

What is maybe more interesting: What is the form look like? How does it interact with bpmn-js?

3

I want to create MagicPropertiesProvider.js (bpmn-js-examples/MagicPropertiesProvider.js at master · bpmn-io/bpmn-js-examples · GitHub)based on data in database.
in this example the form will be like defining the name of the group and his proprieties.
blackMagicGroup = {
id: ‘black-magic’,
label: ‘Black Magic’,
entries: []
};
I don’t know if you get the idea :frowning: sorry for bad expression .

4

What you could do is to add your persisted properties via config when initializing the Modeler and after you got the definition from a database

const modeler = new Modeler({
  container,
  // ...
  myPropertiesData: {
    tabs: [
      {
        id: "customTab1",
        label: "My Tab 1",
        groups: [
          {
            id: "group1",
            label: "My Group 1",
            entries: []
          }
        ]
      },
      {
        id: "customTab2",
        label: "My Tab 2",
        groups: [
          {
            id: "group2",
            label: "My Group 2",
            entries: []
          }
        ]
      }
    ]
  }
});

and then register it via a custom provider as shown in this example.

1 Like