1 | # bpmn-js-properties-panel
|
2 |
|
3 | [![Build Status](https://travis-ci.org/bpmn-io/bpmn-js-properties-panel.svg?branch=master)](https://travis-ci.org/bpmn-io/bpmn-js-properties-panel)
|
4 |
|
5 | This is properties panel extension for [bpmn-js](https://github.com/bpmn-io/bpmn-js).
|
6 |
|
7 | [![bpmn-js-properties-panel screenshot](https://raw.githubusercontent.com/bpmn-io/bpmn-js-properties-panel/master/docs/screenshot.png "Screenshot of the bpmn-js modeler + properties panel")](https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel)
|
8 |
|
9 |
|
10 | ## Features
|
11 |
|
12 | The properties panel allows users to edit invisible BPMN properties in a convenient way.
|
13 |
|
14 | Some of the features are:
|
15 |
|
16 | * Edit element ids, multi-instance details and more
|
17 | * Edit execution related [Camunda](http://camunda.org) properties
|
18 | * Redo and undo (plugs into the [bpmn-js](https://github.com/bpmn-io/bpmn-js) editing cycle)
|
19 |
|
20 |
|
21 | ## Usage
|
22 |
|
23 | Provide two HTML elements, one for the properties panel and one for the BPMN diagram:
|
24 |
|
25 | ```html
|
26 | <div class="modeler">
|
27 | <div id="canvas"></div>
|
28 | <div id="properties"></div>
|
29 | </div>
|
30 | ```
|
31 |
|
32 | Bootstrap [bpmn-js](https://github.com/bpmn-io/bpmn-js) with the properties panel and a [properties provider](https://github.com/bpmn-io/bpmn-js-properties-panel/tree/master/lib/provider):
|
33 |
|
34 | ```javascript
|
35 | var BpmnJS = require('bpmn-js/lib/Modeler'),
|
36 | propertiesPanelModule = require('bpmn-js-properties-panel'),
|
37 | propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/bpmn');
|
38 |
|
39 | var bpmnJS = new BpmnJS({
|
40 | additionalModules: [
|
41 | propertiesPanelModule,
|
42 | propertiesProviderModule
|
43 | ],
|
44 | container: '#canvas',
|
45 | propertiesPanel: {
|
46 | parent: '#properties'
|
47 | }
|
48 | });
|
49 | ```
|
50 |
|
51 |
|
52 | ### Dynamic Attach/Detach
|
53 |
|
54 | You may attach or detach the properties panel dynamically to any element on the page, too:
|
55 |
|
56 | ```javascript
|
57 | var propertiesPanel = bpmnJS.get('propertiesPanel');
|
58 |
|
59 | // detach the panel
|
60 | propertiesPanel.detach();
|
61 |
|
62 | // attach it to some other element
|
63 | propertiesPanel.attachTo('#other-properties');
|
64 | ```
|
65 |
|
66 |
|
67 | ### Use with Camunda properties
|
68 |
|
69 | In order to be able to edit [Camunda](https://camunda.org) related properties, use the [camunda properties provider](https://github.com/bpmn-io/bpmn-js-properties-panel/tree/master/lib/provider/camunda).
|
70 | In addition, you need to define the `camunda` namespace via [camunda-bpmn-moddle](https://github.com/camunda/camunda-bpmn-moddle).
|
71 |
|
72 | ```javascript
|
73 | var BpmnJS = require('bpmn-js/lib/Modeler'),
|
74 | propertiesPanelModule = require('bpmn-js-properties-panel'),
|
75 | // use Camunda properties provider
|
76 | propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/camunda');
|
77 |
|
78 | // a descriptor that defines Camunda related BPMN 2.0 XML extensions
|
79 | var camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');
|
80 |
|
81 | var bpmnJS = new BpmnJS({
|
82 | additionalModules: [
|
83 | propertiesPanelModule,
|
84 | propertiesProviderModule
|
85 | ],
|
86 | container: '#canvas',
|
87 | propertiesPanel: {
|
88 | parent: '#properties'
|
89 | },
|
90 | // make camunda prefix known for import, editing and export
|
91 | moddleExtensions: {
|
92 | camunda: camundaModdleDescriptor
|
93 | }
|
94 | });
|
95 |
|
96 | ...
|
97 | ```
|
98 |
|
99 |
|
100 | ## Additional Resources
|
101 |
|
102 | * [Issue tracker](https://github.com/bpmn-io/bpmn-js-properties-panel)
|
103 | * [Forum](https://forum.bpmn.io)
|
104 | * [Example Project](https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel)
|
105 |
|
106 |
|
107 | ## Development
|
108 |
|
109 | ### Running the tests
|
110 |
|
111 | ```bash
|
112 | npm install
|
113 |
|
114 | export TEST_BROWSERS=Chrome
|
115 | npm run all
|
116 | ```
|
117 |
|
118 |
|
119 | ## License
|
120 |
|
121 | MIT |
\ | No newline at end of file |