Camunda commons UI 7.13.0-SNAPSHOT

Bpmn-Viewer

Description

This widget displays a BPMN diagram and lets the user interact with it using the mouse (zoom and move). It also provides an API to highlight elements and create badge annotations.

Usage

Options

= diagram-data
A string containing the XML content or an object containing the bpmn.io conforming process definition model of the rendered BPM model.
= 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:
  • highlight(id): Highlights an element by ID.
  • clearHighlight(id): Removes the highlight from the element by ID.
  • isHighlighted(id): Returns whether an element is highlighted (boolean).
  • createBadge(id, config): Creates a badge annotation for an element. Config is an object containing the following properties:
    • color: background color of the badge (HTML color string: #FFFFFF)
    • tooltip: Tooltip text
    • text: Text content of the badge
    • html: An HTML element which is used as badge. Replaces color, tooltip and text when provided.
    • position: Object describing the position of the badge (see diagram.js documentation)
  • removeBadges(id): Removes all badges from an element by ID.
  • getViewer(): Returns the bpmn.io viewer instance of the diagram
  • scrollToElement(id): Will bring an element with a given ID into the viewport and zoom out if necessary. Will not zoom in.
  • getElement(id): Returns the bpmn.io object representing an element with a given ID.
  • isLoaded(): Returns whether the diagram is loaded and displayed.
  • addAction(config): Creates an action on the diagram. Config is an object containing the following properties:
    • html: An HTML element which is used as badge. Replaces color, tooltip and text when provided.
& on-load
Method that is called after the diagram is loaded correctly. Diagram will already be correctly zoomed and event listeners are setup. Will also be called whenever the diagram-data value changes and the diagram successfully reloads.
& on-click
Method that is called when the user clicks on an element in the diagram. Via the named parameter element, the target of the click can be accessed. Hint: Using element.businessObject.$instanceOf('bpmn:FlowNode') you can retrieve the type of the clicked element.
& on-mouse-enter
Method that is called when the user hovers over an element in the diagram. Via the named parameter element, the element can be accessed.
& on-mouse-leave
Method that is called when the user stops hovering over an element in the diagram. Via the named parameter element, the element can be accessed.
& disable-navigation
Boolean indicating whether the diagram should be navigatable. If set to false, move and zoom functionality is disabled. This does not affect the callbacks, you can still have onclick listeners on an diagram with disabled navigation. This setting can not be changed at runtime.

Example

Navigated Viewer

Selected elements: {{selectedNodes}}
Hovering over: {{hovering}}
$scope.diagramXML = /* bpmn xml string */;
$scope.control = {};
$scope.selectedNodes = [];

$scope.handleClick = function(element) {
  if(element.businessObject.$instanceOf('bpmn:FlowNode')) {
    if($scope.control.isHighlighted(element.id)) {
      $scope.control.clearHighlight(element.id);
      $scope.control.removeBadges(element.id);
      $scope.selectedNodes.splice($scope.selectedNodes.indexOf(element.id),1);
      $scope.$apply();
    } else {
      $scope.control.highlight(element.id);
      $scope.control.createBadge(element.id, {text: 'Test', tooltip: 'This is a tooltip'});
      $scope.selectedNodes.push(element.id);
      $scope.$apply();
    }
  }
};

$scope.hovering = [];
$scope.mouseEnter = function(element) {
  $scope.hovering.push(element.id);
  $scope.$apply();
};
$scope.mouseLeave = function(element) {
  $scope.hovering.splice($scope.hovering.indexOf(element.id), 1);
  $scope.$apply();
};

<div cam-widget-bpmn-viewer
            diagram-data='diagramXML'
            control='control'
            on-click='handleClick(element)'
            on-mouse-enter='mouseEnter(element)'
            on-mouse-leave='mouseLeave(element)'
            style="height: 400px;"></div>
Selected elements: {{selectedNodes}}<br />
Hovering over: {{hovering}}

Navigation Disabled

$scope.diagramXML = /* bpmn xml string */;

<div cam-widget-bpmn-viewer
            diagram-data='diagramXML'
            disable-navigation='true'
            style="height: 400px;"></div>