Add One More Label to Element


#1

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


#2

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


#3

We need to write to label responsible role or organization.


#4

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


#5

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.


#6

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


#7

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.


#8

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


#9

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>

#10

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];
  }