Camunda commons UI 7.12.0-SNAPSHOT

Dmn-Viewer

Description

This widget displays a DMN table.

Usage

Options

= xml
A string containing the XML content of the DMN model to render.
= control
An object containing the control API of the widget. After initialization of the widget, the object provided in by this variable contains the following methods:
  • getViewer(): Returns the dmn.io viewer instance of the table
  • getElement(id): Returns the dmn.io object representing an element with a given ID.
  • isLoaded(): Returns whether the table is loaded and displayed.
& edit-mode
Takes true or false to indicate if the table can be edited.
& show-details
Takes true or false to indicate if the table technical details are shown by default.
& on-load
Allows to pass a function which will be called when the table is loaded.
= width
A value to set the width of the table element (not the widget).
Note: unless otherwise specified in the value, the unit will be pixel.
See the sizing example.
= height
A value to set the height of the table element (not the widget).
Note: unless otherwise specified in the value, the unit will be pixel.
See the sizing example.
@ table
Name or index of dmn table that should be displayed. Applies only to decision requirements definitions.
& on-click
Allows to pass function that will be called when decision requirements definition element is clicked.
& on-dbl-click
Allows to pass function that will be called when decision requirements definition element is double clicked.
= enable-drd-navigation
Enables decision requirements definition navigation between decisions diagram and decision requirements definition diagram.
= disable-loader
Disables diagram loading indicator

Examples

Viewer

<!--
$scope.tableXML = /* dmn xml string */;
$scope.control = {};
-->
<div cam-widget-dmn-viewer
     xml="decisionTable"
     control="control"></div>

Editor

<div cam-widget-dmn-viewer
     xml="decisionTable"
     control="control"
     edit-mode="true"></div>

Sizing

<div style="border: 1px dashed #a33; max-height: 250px; max-width: 500px; margin: auto; overflow: auto; padding: 5px;"
  <div cam-widget-dmn-viewer
       xml="decisionTable"
       control="control"
       width="800"
       height="500"
       edit-mode="true"
       show-details="true">
  </div>
</div>

DRD Viewer Example

<!--
$scope.drdXML = /* dmn xml string */;
$scope.control = {};
-->
<div cam-widget-dmn-viewer
     xml="drdXML"
     control="control"></div>

DRD Viewer Single Table Example

<!--
$scope.drdXML = /* dmn xml string */;
$scope.control = {};
-->
<div cam-widget-dmn-viewer
     xml="drdXML"
     table="season"
     control="control"></div>

DRD Viewer With Navigation

<!--
$scope.drdXML = /* dmn xml string */;
$scope.control = {};
-->
<div cam-widget-dmn-viewer
     xml="drdXML"
     enableDrdNavigation="true"
     control="control"></div>