Want to try out modeling in domain-specific, reusable building blocks? Check out our demo.

Element Templates

The tool that powers declarative, domain specific modeling at bpmn.io.

About

Element templates allow you to define re-usable, domain specific building blocks to supported bpmn.io toolkits. Through a set of utilities they deeply integrate into the modeling experience.

Features

Through a JSON document you define different aspects of a re-usable building block.

General Configuration

Name and description
Icon
BPMN element type
Category
Documentation references
Versioning + deprecation information

Property Configuration

Type of control
Technical binding
Labels, description
Validation
Grouping
Conditional activation criteria

Editor Integration

Through a set of utilities element templates get deeply integrated into our editor tooling.

Create/Append Anything

Provided through an extension.

Palette and context pads have a ... entry to create / append any element
Building blocks can be discovered via search
Replace menu is enhanced to work using the same pattern

Configuration

Provided through the properties panel.

Properties panel displays configuration properties
Validates inputs according to defined validation rules
Shows basic template meta-data
Allows applying, unlinking and removing of a template

Upgrading

Provided through the properties panel as well as an extension.

Templates come with two built-in ways of migration: Upgrading to a newer (compatible) version or deprecation (with the ability to display a custom message).

Upgrading works alongside the built-in versioning feature
Migration happens using the built-in replace feature
Upgrade and replace will preserve defined properties on a best effort basis

Basic Setup

The basic setup requires a BPMN modeler as well as properties panel and element template provider modules:

import BpmnModeler from 'bpmn-js/lib/Modeler';

import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  ZeebePropertiesProviderModule,
  CloudElementTemplatesPropertiesProviderModule
} from 'bpmn-js-properties-panel';

It allows you to pass element templates to the modeler during instantiation via the elementTemplate configuration:

const elementTemplates = [ ... ];

const modeler = new BpmnModeler({
  container: '#canvas',
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    ZeebePropertiesProviderModule,
    CloudElementTemplatesPropertiesProviderModule
  ],
  elementTemplates
});

Checkout API for advanced use-cases driven via additional APIs.

Supported Toolkits

Right now element templates are supported in bpmn-js.

Creating an Element Template Provider

Refer to the create a provider guide.

Related Utilities

bpmn-js-properties-panel - Provides the ElementTemplate core and ships with two implementation for technical property binding of Camunda properties.
element-templates-icons-renderer - Renders embedded element template icons on the modeling canvas.
element-template-chooser - A simple element template chooser that plugs into the properties panel
element-template-json-schema - The schema definition for template descriptors
bpmn-js-connectors-extension - A deep integration into the core modeling experience, featuring create + append anything and replacing with template tasks