Custom Components running in a different scope

Developers Modeler
1

Hello,

I am using the bundled Modeler, and I am trying to customize Pallete and ContextPad. I got the example from source code to use, as below, however it seems it is not being called using the same scope from Modeler, which means I cannot call any functions used internally. Is there a way to force this Custom being called on internal scope??

  function CustomContextPadProvider(contextPad) {
 
    contextPad.registerProvider(this);
 
    this.getContextPadEntries = function(element) {
      // no entries, effectively disable the context pad

//HERE --> If I cope the same code from ContextPadProvider, I get errors calling isAny, is, or any other functions

      return {};
    };
  }
 
  CustomContextPadProvider.$inject = [ 'contextPad' ];
 
  var overrideModule = {
    contextPadProvider: [ 'type', CustomContextPadProvider ]
  };
 
  var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
2

Any ideas? I need to customize both Pallete and context pad, but I don’t see a way without accessing internal context to use variables and functions.

3

If you’d like to access internal helpers via require('some-path') you would need to create your own Browserify bundle. You cannot access these path from the pre-bundled version of the library.

Your example as posted should work out of the box as long as you do not rely on internal components.

4

Hy,

if you just want to add only one or more tools to the context menu, just register a “CustomContextProvider” like below:

 var modeler = new BpmnJS({
    container: '#modelerCanvas'
});
var contextPad = modeler.get('contextPad');
function CustomContextPadProvider(contextPad) {
        contextPad.registerProvider(this);
        this.getContextPadEntries = function (element) {
            //Every object variable is a new "action"
            return {
                'editServer' : {
                    group : "edit",
                    className : "bpmn-icon-sequential-mi-marker",
                    title: "Configuration",
                    action : {
                        click : function () {
                           //Do your logic here
                            contextPad.close();
                        }
                    }
                }
            };
        };
    }
new CustomContextPadProvider(contextPad);
1 Like