Add One More Label to Element

Hi Everyone,

I want to add another label below a task. In this Question asked but it is complex. I want to only one more read only label below task.
One more question ,

I want to handle text changes in elements. How can I handle it. I tried element.changed . But it works everytime not only for text.
Thank you

What’s the use case? What information do you want to display in that second label?

We need to write to label responsible role or organization.

And this information is part of your model? Is this information supposed to be editable?

Yes part of my model. Actually I can add label extra below it but ıt is useless and In my model I want it read only. I want to change it programmatically like name of businessobject. The user will choice it from a panel.

I don’t understand. It’s supposed to be read-only but can be edited?

I want to edit it programmatically. So only add another label to one task elemen basically. I tried createLabel of elementfactory and canvas add shape functions for add another label to task elemen but I couldn’t . So please help me basically, it doesnt mather editable or readonly feature of label , I want to add another label to below task element.

I used CustomRenderer for task. DrawShape function running for draw task.
I added renderCustomLabel method to add another label below task.

  this.drawShape = function (parent, element) {
    var attrs = {
      fill: getFillColor(element),
      stroke: getStrokeColor(element)
    };

    var rect = drawRectForTask(parent, element, attrs)

    renderEmbeddedLabel(parent, element, 'center-middle');
    attachTaskMarkers(parent, element);
    var text = getSemantic(element).name;
    renderCustomLabel(parent,text,element); // ExtraAdd

    return rect;
  };

  function renderCustomLabel(parentGfx, text, element) {
    var textBox = renderLabel(parentGfx, text, {
      box: {
        height: 30,
        width: element.width
      },
      align: 'center-middle',
      style: {
        fill: getStrokeColor(element, 'black')
      }
    });

    var top = -1 * element.height;

    transform(textBox, 0, -top, 0);
  }

I have problem now. When I clicked the center label(MainLabel,DefaultLabel) and changed it , both of them are changing. I want to change the second label programmatically and I need to disable updating all labels when changed the center label. What should I do, Do I need to implement the LabelEditingProvider ?

LabelAdd

1 Like

After wrote I noticed something :smile: . I changed now like that It works :slight_smile:

    var text = getSemantic(element).secondName;
    if(!text)
    {
      text= "empty";
    }
    renderCustomLabel(parent,text,element);

image

Now I’m changing my question , How can I add this new attribute secondName to Task for xml.

    <bpmn:task id="Task_0s340uj" name="testsdadsadsa">
      <bpmn:incoming>SequenceFlow_07tczfz</bpmn:incoming>
      <bpmn:outgoing>SequenceFlow_0hscxjc</bpmn:outgoing>
    </bpmn:task>

Adding Custom Attribute to BPMN Elements I used this solution and added attribute. When I want to update the label I update the code section below ,

  this.drawShape = function (parent, element) {
    var attrs = {
      fill: getFillColor(element),
      stroke: getStrokeColor(element)
    };

    var rect = drawRectForTask(parent, element, attrs)

    renderEmbeddedLabel(parent, element, 'center-middle');
    attachTaskMarkers(parent, element);
    //renderExternalLabel(parent, element);  
    var text= "";
    var role= getExtension( getSemantic(element), "hbk:Role");
    if(role)
    {
             text= role.Name
    }

    renderCustomLabel(parent,text,element);

    return rect;
  };

  function getExtension(element,type) {
      if (!element.extensionElements) {
          return null;
      }

      return element.extensionElements.get('values').filter(function (e: any) {
          return e.$instanceOf(type);
      })[0];
  }