How to add labels to custom elemens


I want to add labels to custom elemens. I add code to LabelEditingProvider.js and LabelUtil.js, but the label can’t display. What steps are needed to implement this function?

  function activateDirectEdit(element, force) {
    if (force ||
        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
        isCollapsedSubProcess(element) || element.type === "custom:OM") {

function getLabelAttr(semantic) {
  if (is(semantic, 'bpmn:FlowElement') ||
      is(semantic, 'bpmn:Participant') ||
      is(semantic, 'bpmn:Lane') ||
      is(semantic, 'bpmn:SequenceFlow') ||
      is(semantic, 'bpmn:MessageFlow') || semantic.type === "custom:OM") {

    return 'name';

  if (is(semantic, 'bpmn:TextAnnotation')) {
    return 'text';



I assume you’re working with this example. I also assume you haven’t added a businessObject property to the custom shapes. In the case of BPMN 2.0 elements these contain any business-related information. It doesn’t make much sense to add business objects to your custom shapes anyway since they are not BPMN 2.0 elements. I’m wondering if this example is helpful to you. What is your use case for custom elements? Do you want them to be BPMN 2.0 elements with a couple of additional properties? If so than have a look at this example: