High level steps to extend DMN Decision Table Features

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

Goal

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

Question
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

Hi,

@mallesh mentioned here Angular application. And I have the same problem but with VueJS.
I am having hard time figuring out how should I extend dmn-js within a VueJS application?

Currently, If I define an Inferno component for dmn-js within VueJS app, it is getting transpiled with Babel set up for VueJS, so for example render function is converted to a JS function, that expects a createElement function as first argument. But when it is called within dmn-js, first argument is not a createElement function. So how should I go on with this?

Should I create a separate library of Inferno components, that I would import in VueJS app and add to the additional modules? But would it make any change? Wouldn’t it be again processed by Babel for VueJS?
Or maybe should I have a different webpack configuration for Inferno components defined in VueJS app sources?

Can you maybe provide an example, where dmn-js is being customized within project written in another framework than Inferno?

Regards,
Przemek

OK,

I was able to figure this out. In case anyone needs that, I had to configure webpack in Vue project to be like that:

chainWebpack: config => {
    // config needed for dmn plugins
    const dmnDir = path.resolve(__dirname, 'src/dmn');
    config.module
      .rule('js')
      .exclude
      .add(dmnDir);
    config.module
      .rule('inferno')
      .test(/.*\.js$/)
      .include
      .add(dmnDir)
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .tap(options => {
        options = options || {};
        options.presets = ['inferno-app'];
        return options;
      });
  }

This way all files in dmn are omitted by default Vue config and are handled by inferno-app preset.