Not able to display dmn-js tables in a div container of class "canvas"

Developers
1

Hi,
I am working with angular 4 project. I am using dmn-js modeler to show the rules in front-end. I am not able to populate dmn-js in particular div class=“canvas” container.
THis is how I tried in my application:

this.viewer = new dmn({container: ‘body’});
console.log(this.viewer);
this.viewer.importXML( res[’_body’],function(err){
This change works well if I test with the online dmn.js editor styles but that shoulnt be the case

Will the styles present for the online dmn-js editor will be present in the library? Do I need to write any customized styles for my dmn table to display in my UI.

2

If you want the viewer/modeler to be displayed in the desired container you have to specify it. You specified { container: 'body' } which is the default option.

You’d have to do this:

var myContainer = document.getElementsByClassName('canvas');

this.viewer = new dmn({ container: myContainer });
3

This is not working for me. It is throwing me an error “parent.appendChild is not a function”

4

Are you sure your container element is not undefined?

5

Yea it is not undefined

6

How does your HTML look and what code exactly are you executing?

7

8

These are my .html and .ts files that I am using in angular 2 components.

9

Hi Phillip,
@philippfromme I did manage to get that into my required container but the problem is, since it is getting displayed in the container that is present in the bottom of page it not going beyond the scrollable limit. PFA screenshot

10

the remaining rules are not visible anymore.

11

Did you attach the screenshots? I can’t see any. :disappointed_relieved:

12

Hi Phillip,
I got the issue solved I am able to render the dmn tables in the required dmn container now. Thank you