Skip to content
Branch: master
Find file History

dmn-js Modeler Example

This example showcases using the API of dmn-js to build a tabbed modeler.

It builds upon the starter example.

modeler example screenshot

Try it out.

Usage Summary

Open a view using #getViews and #open when clicking on a tab.

$('.editor-tabs').delegate('.tab', 'click', function(e) {

  // get index of view from clicked tab
  var viewIdx = parseInt(this.getAttribute('data-id'), 10);

  // get view using index
  var view = dmnModeler.getViews()[viewIdx];

  // open view;

Update tabs whenever the views change.

dmnModeler.on('views.changed', function(event) {

  // get views from event
  var { views, activeView } = event;

  // clear tabs

  // create a new tab for each view
  views.forEach(function(v, idx) {

    const className = CLASS_NAMES[v.type];

    var tab = $(`
      <div class="tab ${ v === activeView ? 'active' : ''}" data-id="${idx}">
        <span class="${ className }"></span>
        ${ ||}




You can’t perform that action at this time.