How to add properties panel for dmn-js

Developers
1

Hey Community!!!

I have embedded dmn-js with my angular application. I was able to load dmn table in UI, but it seems to be static (read only view).

Screenshot 2021-07-02 at 3.02.08 PM
Screenshot 2021-07-02 at 3.02.08 PM2310×626 51.7 KB

How can I add further components like:

  • Edit and save DMN tables
  • Add Additional Buttons like “Save”, “Reset”, etc
  • Properties Panel for DMN table
2

Hi :wave:

Edit and save DMN tables

Did you already check out the Modeler example from our starters?

With it, you can also access API for saving diagrams.

Add Additional Buttons like “Save”, “Reset”, etc

Are you referring to the buttons available in the demo? They are simply using the available API under the hood. Everything besides (e.g. the visual buttons) are not part of the library, but can be simply built by using this API. E.g. for saving diagrams

try {
  const { xml } = await dmnModeler.saveXML();

  console.log(xml);
} catch (err) {
  console.error(err);
}

Or resetting (restoring the initial diagram)

const initialDiagram = '...';

try {
  const { warnings } = await dmnModeler.importXML(initialDiagram);

  console.log('rendered', warnings);
} catch (err) {
  console.log('error rendering', err);
}

Properties Panel for DMN table

As far as I know, the dmn-js-properties-panel is not available for tables. What would you expect to edit there for decision tables? Any property should be editable in the table directly or in the DRD.