How to register custom service for injection

Developers
1

Hello,
I’m trying to figure out how to register a custom service for injection inside my custom property panel provider.
I want to do this in the custom provider:

export default function MyCustomPropertiesProvider(
	eventBus,
	bpmnFactory,
	elementRegistry,
	translate,
	myDataService
) { ... }

MyCustomPropertiesProvider.$inject = [..., "myDataService"]

So where do I register the instance of myDataService, created elsewhere, into the DI system with the name “myDataService”?

1 Like
2

You add it to additionalModules when creating the bpmn-js instance to let the injector know about your component.

const modeler = new BpmnJS({
  additionalModules: [
    myModule
  ]
});
3

Sorry I’m not keen on javascript modules.
I’ve understood that my custom properties provider works because of this index.js file:

import MyCustomPropertiesProvider from "./MyCustomPropertiesProvider";

export default {
	__init__: ["propertiesProvider"],
	propertiesProvider: ["type", MyCustomPropertiesProvider],
};

so when I

import myCustomPropertiesProvider from "custom-properties-provider";

where “custom-properties-provider” is the folder where index.js resides, the imported object is
{ __init__: "propertiesProvider", propertiesProvider: ["type", MyCustomPropertiesProvider] }

So, I get that init is used to determine the name with which I want to request the provided module, so __init__: "fooBar" means that I’ll write SomeModule.$inject = ["fooBar"].
What I don’t know (where should I look for documentation?) is how to tell the injector that I want to provide an existing instance instead of a constructor for the provided module. I mean, I want to write something like this:

{ __init__: "myCustomService", myCustomService: ["instance", _myCustomServiceInstanceFromAngular] }

Is “instance” a valid string for the injector? If not, what can I write?

1 Like
4

By browsing the source code of didi/lib/injector.js, I tried and managed successfully with:

{ __init__: "myCustomService", myCustomService: ["value", _myCustomServiceInstanceFromAngular] }

I can now call my angular service from the custom properties provider.

2 Likes
5

Nice! Unfortunately there is no documentation for this except for the README of the dependency injection framework we use and our example projects.

You might find this answer helpful: