Create a custom ReplaceOptions

Developers
1

I’m trying to remove some options from the replace menu, but after a lot of searching, can’t find a light at the end of the tunnel.
Basically i’m trying to achieve this:
Sem título

The thing is, I can’t change the ReplaceOptions.js original file to remove the other options, because I’m using Angular, and it wont allow me to change lib files. How can i overwrite this config? I’m really lost here.

2

Can you share a CodeSandbox that reproduces your issue in a way that we can inspect it?

Basically adjusting the replace options also works with creating a custom replace menu provider.

Maybe this one is a good starting point on how to achieve something like that.

3

Hi Niklas thanks for the fast response.
So, what I’m doing so far is this:
I’ve created 2 new files at my project folder

Screenshot_1

The first one is pretty much the same of the original, I’m just changing the imports, to match my ReplaceOptions file, and changed the module name to CustomMenuProvider instead of ReplaceMenuProvider
And in my ReplaceOptions file, I’ve removed all the options I don’t want

So far so good.

And the file in which I work with the BPMN I did this

import * as CustomMenuProvider from './ReplaceOptions/ReplaceMenuProvider';

...

this.viewer = new BpmnJS({
			container: '#canvas',
			width: '100%',
			height: '600px',
			keyboard: { bindTo: document },
			additionalModules: [
				CustomMenuProvider
			]
		});

Am I missing something?

4

So far so good. Does it work?

5

It doesn’t, the replace items list doesn’t change

Maybe its because I’m importing it as

import * as customMenuProvider from './ReplaceProvider';

instead of

var customMenuProvider = require('./ReplaceProvider');

?

6

I’ve solved it

It was indeed a problem in my import
changed to

import customMenuProvider from './ReplaceProvider';

and it works.
thanks for all

2 Likes