Adding custom groups and fields in dmn-js properties panel

[julia-yh-kim]

Continuing the discussion on Customizing dmn js properties panel

I’ve tried to set this up myself on my dmn modeler using the examples included in the bpmn-js-examples for creating a custom group in the properties panel.
My setup for this extension is almost identical to that of the bpmn-js-example except for repointing the imports and methods being called to be from dmn-js and the element types for this change to be applied to to be “dmn:Inputdata”.

The code compiles and doesn’t throw any errors but the new custom group doesn’t get created in the properties panel and I can see that the custom provider I’ve created isn’t being called when i open or create new inputs in the model.

Can someone please clarify if the properties panel for dmn-js should be customizable like the one for bpmn-js? Are there any other changes that would likely need to be made in order to get this example working?

Thanks

[jarekdanielak]

Could you share a CodeSandbox with the minimal code to reproduce what you’re trying to do?

[chenhaoyu1122]

If I want to add other types besides Decision Table and Literal Expression to this change type, is that possible?

[barmac]

@chenhaoyu1122 Please open a new thread instead of replying in an irrelevant one.

[nikku]

@julia-yh-kim we’ll soon publish an example that shows how a properties panel extension for dmn-js can be created. If you want to take a sneak peek, you find it here.

Different from bpmn-js you have to ensure that the properties panel extension is registered for the correct DMN editor view, mind the drd in the following example:

const dmnModeler = new DmnModeler({
  container: '#canvas',
  drd: {
    propertiesPanel: {
      parent: '#properties-panel-parent'
    },
    additionalModules: [
      DmnPropertiesPanelModule,
      DmnPropertiesProviderModule,
      magicPropertiesProviderModule,
      changedLoggerModule
    ]
  },
  moddleExtensions: {
    magic: magicModdleDescriptor
  }
});