Customize Task element

Users
1

how can i add new properties to task element. i tried creating a CustomSchema and extending moddleExtensions. but when you click on the Task element and output it to the console, there are no parameters inside the businessObject. here is an example of a model and a diagram.

{
  "name": "CustomSchema",
  "uri": "http://customschema.com/schema",
  "prefix": "CustomSchema",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "customTask",
      "extends": [
        "bpmn:Task"
      ],
      "properties": [
        {
          "name": "idPomp",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "graphName",
          "isAttr": true,
          "type": "String"
        }
      ]
    }
  ]
}

xml:

"<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:color="http://www.omg.org/spec/BPMN/non-normative/color/1.0" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="10.2.0">
<collaboration id="Collaboration_1qkzllz">
<participant id="Participant_1e8lcg1" name="weqweqw" processRef="Process_1wq5l9j"/>
</collaboration>
<process id="Process_1wq5l9j">
<task id="Activity_05w2gro" name="4234234" idPomp = "28" graphName = "34324">
<outgoing>Flow_0syd9a7</outgoing>
<service code="1" description="один"/>
<service code="2" description="2222"/>
 <comment author="Klaus">
            Our operators always have a hard time to figure out, what they need to do here.
          </comment>
</task>
<task id="Activity_15rkdtp" name="fsdf" idPomp = "28" graphName = "какое-то имя на русском">
<incoming>Flow_0syd9a7</incoming>
<services>
<service code="1" description="один"/>
<service code="2" description="2222"/>
</services>
</task>
<sequenceFlow id="Flow_0syd9a7" sourceRef="Activity_05w2gro" targetRef="Activity_15rkdtp"/>
</process>
<bpmndi:BPMNDiagram id="BpmnDiagram_1">
<bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Collaboration_1qkzllz">
<bpmndi:BPMNShape id="Participant_1e8lcg1_di" bpmnElement="Participant_1e8lcg1" isHorizontal="true">
<dc:Bounds x="320" y="190" width="600" height="250"/>
<bpmndi:BPMNLabel/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Activity_05w2gro_di" bpmnElement="Activity_05w2gro" bioc:stroke="#43a047" bioc:fill="#c8e6c9" color:background-color="#c8e6c9" color:border-color="#43a047">
<dc:Bounds x="500" y="270" width="100" height="80"/>
<bpmndi:BPMNLabel/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Activity_15rkdtp_di" bpmnElement="Activity_15rkdtp">
<dc:Bounds x="700" y="210" width="100" height="80"/>
<bpmndi:BPMNLabel/>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="Flow_0syd9a7_di" bpmnElement="Flow_0syd9a7">
<di:waypoint x="600" y="310"/>
<di:waypoint x="650" y="310"/>
<di:waypoint x="650" y="250"/>
<di:waypoint x="700" y="250"/>
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>"

 bpmnModeler.current = new BpmnModeler({
      container: document.querySelector("#bpmnview"),
      keyboard: {
        bindTo: window,
      },
      additionalModules: [resizeAllModule, BpmnColorPickerModule, minimapModule],
      moddleExtensions: {
        CustomSchema: CustomShema,
      },

modeler.on("element.click", (event) => {
      const element = event.element;
      console.log(element);
    });

image

how I can get and set idPomp and graphName atributs in task ( id=“Activity_15rkdtp”) ?

2

In the XML the custom element will need to be represented using its own namespace, i.e.:

<!-- not this --> 
<task id="Activity_05w2gro" name="4234234" idPomp = "28" graphName = "34324">

<!-- but this -->
<task id="Activity_05w2gro" name="4234234" CustomSchema:idPomp = "28" CustomSchema:graphName = "34324">

This is the nature how XML works + how you can extend BPMN based on that.

2 Likes
3

Based on your provided information, it seems like you are working with a BPMN modeler and trying to extend the properties of a Task element using a CustomSchema. However, when clicking on the Task element, you cannot find the parameters inside the businessObject. Here’s what you can do to get and set the idPomp and graphName attributes for the Task with id=“Activity_15rkdtp”:

  1. First, ensure that you have correctly registered your CustomSchema and moddleExtensions with the BPMN modeler.
  2. To get the attributes (idPomp and graphName) of the Task element with id=“Activity_15rkdtp,” you can use the following code:

javascriptCopy code

modeler.on("element.click", (event) => {
  const element = event.element;
  if (element.type === "bpmn:Task" && element.id === "Activity_15rkdtp") {
    // Get the businessObject of the Task element
    const businessObject = element.businessObject;

    // Get the values of idPomp and graphName attributes
    const idPomp = businessObject.get("CustomSchema:idPomp");
    const graphName = businessObject.get("CustomSchema:graphName");

    // Log the values to the console
    console.log("idPomp:", idPomp);
    console.log("graphName:", graphName);
  }
});