High level steps to extend DMN Decision Table Features

I have DMN Diagrams embedded into my angular application and trying to customize Decision Table


  1. Customize Decision Table Head Input Popup
    1.1 Input Variable field change it to dropdown and populate with internal database values

What is the starting point to extend DMN Decision Table (Looking for the high-level steps)
dmn-js-decision-table used Inferno, customizing the inferno inside an Angular App is it possible and is it the right decision

1 Like

Generally, when you want to extend dmn-js, you need to provide your additional modules on the editor creation, e.g.

const modeler = new DmnModeler({
  decisionTable: {
    additionalModules: [
      /* your module here */

Then, to extend UI, your modules will have to provide Inferno 5 components (preferably use the same Inferno version as in dmn-js) via the components API. Example of that is here: https://github.com/bpmn-io/dmn-js/blob/develop/packages/dmn-js-decision-table/src/features/decision-table-head/editor/InputEditingProvider.js#L13

The first argument is always the type of the component. Types which you can provide for the decision table head are available here: https://github.com/bpmn-io/dmn-js/blob/develop/packages/dmn-js-decision-table/src/features/decision-table-head/components/DecisionTableHead.js#L61

In your use case, you will probably have to replace the context menu, which is provided in the InputEditingProvider.

Good luck!

1 Like