Restriction / rules for bpmn symbol

Developers Modeler
1

is it possible to give restriction to standard symbol in bpmn
for example when startEvent symbol connect to endEvent symbol ?
if it was possible please tell me how to do that
thank you

2

Hi @Hauw_Ric

you can have a look to this thread on how to add custom rules.

1 Like
3

Yes, i already read that thread
but i’m kind of confused how to implement that
can you give me example ?
thank you very much and btw i’m using react for frontend

4

Did you take a detailed look inside the custom rules example which the thread was linked to? What didn’t you understand there? Have you anything coded to get started (and you are able to share)?

5

this is what i try from this thread

import customRulesModules from ‘./Rules/Rule’;

this.modeler = new BpmnModeler({
container: ‘#bpmnview’,
keyboard: {
bindTo: window
},
additionalModules: [
customRulesModules
]
});

i don’t understand how to make custom rules where symbol startEvent cant connect to endEvent

6

You will have to update your rules inside ./Rules/Rules.js (or wherever your custom rules module is placed), to check on the connection.create event, so something like that:

this.addRule('connection.create', function(context) {
    var source = context.source,
        target = context.target;
   
   if(source.type  === 'bpmn:StartEvent' && target.type === 'bpmn:EndEvent') {
      return false;
   }

});
7

Okay i already update rules at Rules.js

this.modeler = new BpmnModeler({
container: ‘#bpmnview’,
keyboard: {
bindTo: window
},
additionalModules: [
customRulesModules
]
});

and put my customRules inside additionalModules. After that i try to connect start with end event and the symbol still connect
is there something that i need to add ?
Thank you and sry english is not my native languange

8

Thank you and sry english is not my native languange

No problem, you’re welcome :blush:

Adding the rule seems to work for me:

Apr-10-2019%2013-41-36

Can your share your Rules.js?

9

Maybe you’re running into the error described here (since your code likes similar)? Then you will probably have to add a priority to your new rule, like described here

10

i already try priority still not working
this is my Rules.js

import inherits from ‘inherits’;
import RuleProvider from ‘diagram-js/lib/features/rules/RuleProvider’;
export default function CustomRules(eventBus) {
RuleProvider.call(this, eventBus);
}

inherits(CustomRules, RuleProvider);
CustomRules.$inject = [ ‘eventBus’ ];

CustomRules.prototype.init = function() {
this.addRule(‘connection.create’, 1100, function(context) {
var source = context.source,
target = context.target;

if(source.type === ‘bpmn:StartEvent’ && target.type === ‘bpmn:EndEvent’) {return false;}
});
};

11

Did you follow the way on how to load the custom rule modules like in the example? So that you move your rule inside a seperate directory and load your custom rules via an index.js.

So given following structure:

rules/
-- Rules.js
-- index.js
app.js

rules/CustomRules.js

import inherits from 'inherits';
import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';

export default function CustomRules(eventBus) {
  RuleProvider.call(this, eventBus);
}

inherits(CustomRules, RuleProvider);
CustomRules.$inject = [ 'eventBus' ];

CustomRules.prototype.init = function() {
  this.addRule('connection.create', 1100, function(context) {
    var source = context.source,
        target = context.target;

    if (source.type === 'bpmn:StartEvent' && target.type === 'bpmn:EndEvent') {return false;}
  });
};

rules/index.js

import CustomRules from './CustomRules';

export default {
  __init__: [ 'customRules' ],
  customRules: [ 'type', CustomRules ]
};

And then load your modeler (app.js)

import customRuleModules from './rules';

this.modeler = new BpmnModeler({
  container: ‘#bpmnview’,
  keyboard: {
   bindTo: window
  },
 additionalModules: [
   customRulesModules
 ]
});

This example works for me. Please share if it doesn’t on your case, so it will likely caused by something different in your application.

1 Like
12

it works… thank you very much :grinning:
i only import my Rule.js
i forgot to import index.js

is there documentation the name of all event ? like “StartEvent” , “EndEvent” and the other

1 Like
13

Good news :slight_smile:

You can have a look inside the BPMN reference, and then view the table of all possible BPMN events.

2 Likes
14

is there a way to remove append function from start event symbol ?
for example i already restrict start event cant connect to end event
but if i click start event symbol i can append end event

15

Please open a new topic for new questions thus ensuring that other users with similar questions can find it.

16