Some questions about some specific needs and whether bpmn-js can ensure them

Developers Modeler
1

I discovered bmpn-js a couple of days ago, and I wanted to make sure that it can be customized to the extent I’m looking for, these are my needs and what I’m hoping to achieve through bpmn.

I’ll be comparing with the example shown here (seems the most global to me):

bpmn-js-examples/modeler at main · bpmn-io/bpmn-js-examples · GitHub

In simple words, I’m trying to restrict the use to “directed acyclyc graphs” only.

  • My diagram needs to be restricted to one startEvent and one endEvent, and it would be very convenient if they are initiated on start, fixed, and cannot be removed.

  • Remove most elements in the palette, as they wouldnt be needed, in fact I would probably only need the create task element all the other would be omitted, even the start and endEvent too (as I want them fixed - first bullet).

  • I also want to make a created task not editable manually, only through a form (a dialog through angular basically), so when double clicking on a task or creating a new one with the the context pad it wouldn’t allow to change the tasks name, instead it opens a form where I can select what the name of it should be (from a list I provide let’s say).

  • I’d also want to delete some of the context pad elements as I will only need these 3 : “Append Task”, “remove”, and maybe “connect using sequence…”.

  • Since as I said, I wanted “directed acyclic graphs” only, I want also the added tasks to have only one input link at max and one output link at max. Edit: I thought of this wrong, one task can have multiple inputs or outputs , to be ignored.

  • Finally, is it possible to call a function at the end and get called by a submit button for example that checks some conditions before submitting: for example

    1. check if every task has only one incoming link at least and one outgoing link at least and if all tasks have been assigned a name.

    2. the start and end elements are both linked.

Obviously, I’m new and I’ll be looking more into the examples in the github repo and the threads in this forum, but any guidance and tips or even linking possible related topics or resources would be very appreciated.

Note: I’m planning on using bpmn-js with angular 11.

Sorry if the topic got too long, I tried to be as specific as possible.

2

Hi @YSFSK, welcome! I’ll try to answer your questions

My diagram needs to be restricted to one startEvent and one endEvent , and it would be very convenient if they are initiated on start, fixed , and cannot be removed .

Since as I said, I wanted “directed acyclic graphs” only, I want also the added tasks to have only one input link at max and one output link at max .

You can use custom rules for this.

Remove most elements in the palette , as they wouldnt be needed, in fact I would probably only need the create task element all the other would be omitted, even the start and endEvent too (as I want them fixed - first bullet).

I’d also want to delete some of the context pad elements as I wil only need these 3 : “Append Task”, “remove”, and maybe “connect using sequence…”.

You can also customize the context pad and palette via extensions.

I also want to make a created task not editable manually , only through a form (a dialog through angular basically), so when double clicking on a task or creating a new one with the the context pad it wouldn’t allow to change the tasks name , instead it opens a form where I can select what the name of it should be (from a list I provide let’s say).

You can have a look into this thread answer. It shows how to disable the direct editing for an element via double clicking (returning false). With this event handler, it would also be possible to add your custom logic, e.g. opening a modal.

Finally, is it possible to call a function at the end and get called by a submit button for example that checks some conditions before submitting : for example

That’s in general not a concern of our toolkits. You’re free to add any UI elements on top and use our API, e.g. getting elements via elementRegistry.

How I was able to answer some of your questions. If possible, please try to follow up on different threads with one question at a time, and link to this original one. It will keep our discussions focused.

1 Like