DMN.io VIEW DMN AND EDIT DMN IN angular appilcation

Hi,

I need some examples to guide how to use DMN.io in angular, may be something like tutorial videos.

Thanks,
Manish

We do not have something like that, but it was asked in the forum before.

html

<div #ref class="editor-container"></div>

In your compoent.ts import DMN Modeller. Pl. see the following

import {  Component,  EventEmitter,  OnInit,  ViewChild,  ElementRef,  AfterViewInit,  ViewContainerRef} from '@angular/core';

import DmnModeler from 'dmn-js/dist/dmn-modeler.development.js';
import propertiesPanelModule from 'dmn-js-properties-panel';
import propertiesProviderModule from 'dmn-js-properties-panel/lib/provider/camunda';
import drdAdapterModule from 'dmn-js-properties-panel/lib/adapter/drd';
import * as camundaModdleDescriptor from 'camunda-dmn-moddle/resources/camunda.json';

@Component({
  selector: 'your-decision-diagram-selector',
  templateUrl: './your-decision-diagram-modeller.component.html',
  styleUrls: ['./your-decision-diagram.component.scss']
 
})
export class YourDecisionModellerComponent implements OnInit, OnDestroy, AfterViewInit {

  private dmnDiagramModeler: DmnModeler; // DMN Modeller
  private importDone: EventEmitter<any> = new EventEmitter(); // Fires as soon as  DMN Modeller, importing XML is success

  @ViewChild('ref', { static: false }) private el: ElementRef; // host for Decision Diagram


  constructor() {
    // initialize DM Diagra Modeller
    this.dmnDiagramModeler = new DmnModeler({
      keyboard: { bindTo: window },
      drd: {
        additionalModules: [propertiesPanelModule, propertiesProviderModule, drdAdapterModule]
      },
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    });

    // fires when XML Import into DMN Modeller is complete
    this.dmnDiagramModeler.on('import.done', ({ error, warnings }) => {
      console.log('Import Done event successfully emitted');
      if (!error) {

        const activeEditor = this.dmnDiagramModeler.getActiveViewer();
        const canvas = activeEditor.get('canvas');
        canvas.zoom('fit-viewport');
        activeEditor.attachTo(this.el.nativeElement);

        // DMN Canvas will have multiple views (one view for each decision box/table)
        const view = this.dmnDiagramModeler.getViews()[0];
        this.dmnDiagramModeler.open(view);


        // PROPERTIES PANEL
        const prosPanel = activeEditor.get('propertiesPanel');
        // console.log('propertiesPanel == ', prosPanel);
        if (null != prosPanel) {
          // console.log('this.elProps', this.elProps);
          prosPanel.attachTo(this.elProps.nativeElement); // attach it to a ViewChild

        }

     
        // SWITCHING TABS
        this.dmnDiagramModeler.on('import.render.complete', (aNewView, err, wrngs) => {
     
        });
      }
    });
  }

  ngOnInit() {
    
  }

  ngAfterViewInit() {
    this.dmnDiagramModeler.on('views.changed', event => {
      console.log('View Changed event got fired.....event = ', event);
    });
  }

  ngOnDestroy() {
    // destroy DMNJs instance
    if (this.dmnDiagramModeler != null) {
      this.dmnDiagramModeler.destroy();
    }
  }
}

1 Like

Hi Mallesh,

Thanks for this code snippet.
However, I am new to Angular and still confused on how I would proceed from this.

I tried calling this.dmnDiagramModeler.importXML, but this kept failing. I downloaded a simple DMN specification from the demo modeler and hardcoded it as the argument for importXML.
I can see that the event fires, however I always get the following error: Error: "failed to parse document as <dmn:Definitions>"

Any suggestions for what I might be doing wrong?

The error means that the diagram could not be imported. What version of dmn-js are you using and what version of DMN is your diagram?

1 Like

Thanks for the quick answer.

When trying to figure out my DMN version, I realised I copy pasted the XML code incorrectly.
I had forgotten the <?xml ... ?> tag in the beginning. It is parsing correctly now.

The good news is however that I am now able to verify that Mallesh’s example works.
Would it be of any use for DMN.io if I created a more fleshed out example version, and placed it in a Git repo?

sharing working examples somewhere (e.g. on GitHub) is always a good idea! Feel free to create something like this and notify us / share it here in the forum. Maybe we can bring it on an example collection then.

As promised, here is a repository containing an example of using the dmn-js modeller in an Angular 9 application. (It probably works for other Angulars too)

I will probably update it in the future as I get to know the library better.

1 Like