Attach a new Header Label to an element

Developers
1

I am looking to add a header and footer label to tasks in the model based on some metadata that I am already attaching. For example, a Task within a model has a set of users that are advised to execute that task. I would like to show those users in a text box below the task, similar to what is already done for the ‘name’ attribute of Start events.

What would the best way to do this be? I have been trying to figure out how ‘name’ is attached to Start events as a text box, but I have not got the full picture yet.

Capture

2

I think I have answered my own question. I have found “…/bpmn-js/lib/features/modeling/behavior/LabelBehavior.js”, which extends LabelSupport to add labels for the ‘name’ attribute for specific elements, like the start events.

Looks like I will extend one of these to add my header/footer labels.

3

Whether to use the LabelBehavior or not depends on two things:

  • Should the labels be interactive (i.e. changeable)? Use external labels / LabelBehavior.
  • No? Simply render the external labels as part of your custom renderer.
4

Thanks nikku. I ended up using Overlays, though there are a few minor quirks with them, maybe using a custom renderer would be better idea. Ill have a look.

Thanks, Blake. :slight_smile:

5

What I recently did is adding a simple side-panel to the right side of the screen. I have attached some javascript code (in combo with Knockout.JS) to the event “element.mousedown”. This gives me the possibility to lookup my own values/properties and visualise them in the side-panel. In my case, I’m looking up users from a SharePoint site in order to create the task based on the BPMN design.

        bpmnModeler.on('element.mousedown', function (event) {
            self.TaskClicked(event.element);
        });
6

Thanks Steven.

I have had a look a the ‘Properties Panel’ example and played around with that. I am using a version of that, integrated with Vaadin to edit the properties for an element in the Modeler. But this is specifically for viewing the model where a side panel (for our needs/requirements) doesn’t really make sense.

I am new/self taught to Javascript and always happy to hear of new technologies, Knockout.JS looks interesting. Thanks for mentioning it :slight_smile:

Blake.