Error Helper.js:34 Uncaught TypeError: bo.get is not a function

There are error display when integration with Properties Panel

> `Helper.js:34 Uncaught TypeError: bo.get is not a function
>     at getTemplateId (Helper.js:34)
>     at getTemplate (Helper.js:50)
>     at applyDefaultTemplate (index.js:35)
>     at index.js:16
>     at invokeFunction (EventBus.js:480)
>     at EventBus._invokeListener (EventBus.js:356)
>     at EventBus._invokeListeners (EventBus.js:344)
>     at EventBus.fire (EventBus.js:304)
>     at CommandStack._fire (CommandStack.js:346)
>     at CommandStack._internalExecute (CommandStack.js:420)`

[nikku]

Please attach a test case that allows us to reproduce the behavior you're seeing.

Without such test case there is no way we're able to help you.

@nikku I get clone from https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel project then add custom element to project .

[nikku]

Please share your complete setup so that we are able to look into your issue.

The setup as the following :
1- https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel
2- Add custom-modeler as screen attachment already get from https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-elements
3- in index.js change to :

import $ from 'jquery';
import BpmnModeler from 'bpmn-js/lib/Modeler';

import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
import CustomModeler from './custom-modeler';
import {
  debounce
} from 'min-dash';

import diagramXML from '../resources/newDiagram.bpmn';


var container = $('#js-drop-zone');

var canvas = $('#js-canvas');

var bpmnModeler = new CustomModeler({
  container: canvas,
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  moddleExtensions: {
    camunda: camundaModdleDescriptor
  },
   keyboard: {
    bindTo: document
  }
});
container.removeClass('with-diagram');

function createNewDiagram() {
  openDiagram(diagramXML);
}

function openDiagram(xml) {

  bpmnModeler.importXML(xml, function(err) {

    if (err) {
      container
        .removeClass('with-diagram')
        .addClass('with-error');

      container.find('.error pre').text(err.message);

      console.error(err);
    } else {
      container
        .removeClass('with-error')
        .addClass('with-diagram');
    }


  });
}

function saveSVG(done) {
  bpmnModeler.saveSVG(done);
}

function saveDiagram(done) {

  bpmnModeler.saveXML({ format: true }, function(err, xml) {
    done(err, xml);
  });
}

function registerFileDrop(container, callback) {

  function handleFileSelect(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;

    var file = files[0];

    var reader = new FileReader();

    reader.onload = function(e) {

      var xml = e.target.result;

      callback(xml);
    };

    reader.readAsText(file);
  }

  function handleDragOver(e) {
    e.stopPropagation();
    e.preventDefault();

    e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  container.get(0).addEventListener('dragover', handleDragOver, false);
  container.get(0).addEventListener('drop', handleFileSelect, false);
}


////// file drag / drop ///////////////////////

// check file api availability
if (!window.FileList || !window.FileReader) {
  window.alert(
    'Looks like you use an older browser that does not support drag and drop. ' +
    'Try using Chrome, Firefox or the Internet Explorer > 10.');
} else {
  registerFileDrop(container, openDiagram);
}

// bootstrap diagram functions

$(function() {

  $('#js-create-diagram').click(function(e) {
    e.stopPropagation();
    e.preventDefault();

    createNewDiagram();
  });

  var downloadLink = $('#js-download-diagram');
  var downloadSvgLink = $('#js-download-svg');

  $('.buttons a').click(function(e) {
    if (!$(this).is('.active')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });

  function setEncoded(link, name, data) {
    var encodedData = encodeURIComponent(data);

    if (data) {
      link.addClass('active').attr({
        'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
        'download': name
      });
    } else {
      link.removeClass('active');
    }
  }

  var exportArtifacts = debounce(function() {

    saveSVG(function(err, svg) {
      setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
    });

    saveDiagram(function(err, xml) {
      setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
    });
  }, 500);

  bpmnModeler.on('commandStack.changed', exportArtifacts);
});

4- index.html

 <style type="text/css">

    .icon-custom-triangle {
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%233CAA82%22%20width%3D%22270%22%20height%3D%22240%22%3E%3Cpath%20d%3D%22M8%2C40%20l%2015%2C-27%20l%2015%2C27%20z%22%2F%3E%3C%2Fsvg%3E');
    }

    .icon-custom-circle {
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke-width%3D%228%22%20stroke%3D%22%2348a%22%20fill%3D%22none%22%20viewBox%3D%220%200%20120%20120%22%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2240%22%2F%3E%3C%2Fsvg%3E');
    }
	
	.icon-custom-email {
					width: 100px;
					height: 100px;
					background-color: #E30606;
	}

  </style>

@nikku Reminder

[fyndalf]

I'm currently facing the same issue with a setup quite similar. Also, I could reproduce the error when using adding the properties-panel to the custom-elements example as described by @NajwaKhaled. Is there any update on this?

[fyndalf]

@NajwaKhaled In my case, adding

attrs.businessObject.get = (attributeToGet) => {
    return attrs.businessObject[attributeToGet]
}

attrs.businessObject.set = (key, value) => {
    attrs.businessObject[key] = value
}

in the CustomElementFactory did the trick as a quick fix. Maybe try something similar?

[nikku]

We'll have a look and check whether or not this is an easy thing to fix ⚡ .

[philippfromme]

The issue is that the business object created in CustomElementFactory is not an instance of ModdleElement but a plain object. Therefore it lacks the #get and #set methods among others. bpmn-js-properties-panel relies on these methods. This is why @fyndalf's fix works.

We'll take care of this as soon as there's time.