@bpmn-io/variable-outline

A React component to display variables in a BPMN diagram.

Usage

Simply add the component to your existing React application and pass the bpmn-js injector to the component:

import VariableOutline from '@bpmn-io/variable-outline';
import '@camunda/design-system/styles.css';
import '@bpmn-io/variable-outline/dist/variable-outline.css';

export function MyComponent(props) {
  const {
    injector
  } = props;

  return <VariableOutline injector={injector}></VariableOutline>
}

Revealing the Defining Field

[!NOTE] Clicking the element that writes a variable also reveals the properties panel field that defines it. The field is resolved through propertiesPanel#getEntryId(element, path), so this requires bpmn-js-properties-panel@>=5.63.0; with an older panel the click only selects the element. Fields contributed by element templates additionally need bpmn-js-element-templates@>=2.29.0.

Design System

[!NOTE] The component is built on @camunda/design-system, a required peer dependency. The host application loads its stylesheet, @camunda/design-system/styles.css, once.

Development

Start a demo page with npm run start.

Run all tests with npm run test

Code of Conduct

By participating to this project, please uphold to our Code of Conduct.

License

MIT

Uses bpmn-js licensed under the bpmn.io license.