Properties Panel - Diagram JS

Developers General
1

Hi,

I can see the following repo: https://github.com/bpmn-io/properties-panel

I assume this can be used with Diagram-JS to provide a properties panel.

Wondering if there is any example code anywhere to help get started with the diagram-js-editor example?

Thanks,
Jay.

2

I think there is no dedicated example for this as of now.

What you could do is to have a look inside how the BPMN properties panel is integrating itself as a diagram-js service: https://github.com/bpmn-io/bpmn-js-properties-panel/tree/master/src/render

As you see, it is using the eventBus to render the properties panel at a certain state.

eventBus.on('diagram.init', () => {
  if (parent) {
    this.attachTo(parent);
  }
});

eventBus.on('root.added', (event) => {
  const { element } = event;

  this._render(element);
});
3

Thanks @Niklas_Kiefer

I created a different Renderer and added it to my editor.js.

When loading, I get an error now:

client:209 ./src/properties-panel/NSDPropertiesPanelRenderer.js 141:6
Module parse failed: Unexpected token (141:6)
You may need an appropriate loader to handle this file type.
| 
|     render(
>       <PropertiesPanel
|         element={ element }
|         injector={ this._injector }

I assume I need some sort of Provider for this.

Any pointers on what the minimum requirement is for a provider? I’m looking to get the basic skeleton up where I can display an empty properties panel on the canvas.

Thanks,
Jay.

4

Two things

How does this look like? Do you use webpack for bundling? The error reveals that you need an loader to support this jsx style.

Inside our examples, we use babel-loader for this.

I assume I need some sort of Provider for this.

That’s up to your implementation. The idea of providers is an implementation detail of bpmn-js-properties-panel. The base PropertiesPanel component only requires a property groups, which can be an empty array as well.

5

@Niklas_Kiefer

Thanks for the link to webpack.

I did have a webpack for bundling but I’ve copied the example you give. I don’t get any compilation errors.

However, the issue is with the _render method that I’ve copied from BPMNPropertiesPanelRenderer:

I’ve copied this file and using it in my project. Updated the _render as follows:

  _render(element) {
    const canvas = this._injector.get('canvas');

    if (!element) {
      element = canvas.getRootElement();
    }

    if (isImplicitRoot(element)) {
      return;
    }

    render(
      <PropertiesPanel
        element={ element }
        injector={ this._injector }
        getProviders={ this._getProviders.bind(this) }
        layoutConfig={ this._layoutConfig }
        descriptionConfig={ this._descriptionConfig }
      />,
      this._container
    );

    this._eventBus.fire('propertiesPanel.rendered');
  }

It doesn’t like the "<PropertiesPanel…/>. I have to admit I’m new to this so I don’t have a full grasp of how this is plumbed together.

Appreciate the help on this so far.

6

I think you have to notice that PropertiesPanel and BpmnPropertiesPanel are two different components with different props, you can’t simply exchange one by another.

The second is simply putting all the things the first one needs together, on top.

7

Hi @Niklas_Kiefer

I do notice that and do understand that they’re 2 different components - however, I do not understand why it cannot load the PropertiesPanel.

Please see the following sandbox environment, you can see the source I have:diagram-js - CodeSandbox

The files for properties panel are in src/properties-panel/render.

Thanks

8

Thanks for sharing your Sandbox. However, this issue doesn’t pop up there, because your properties panel implementation is nowhere used. Do you have an example that showcases your issue?

9

Hi @Niklas_Kiefer,

Apologies, for some reason, the latest file didn’t get uploaded.

Please check now.

Kind Regards,
Jay.

10

I’m still not able to reproduce your problem. For me, the output is still blank:

image

Can you provide any example that directly reproduces the issue?

11

Hi @Niklas_Kiefer,

Strangely enough - I am unable to reproduce the error on my local environment and on sandbox now.

The only thing that has changed is that my laptop had restarted.

I still cannot get a properties panel to load but I’m no longer getting unexpected Token error.

Thank you for your help and apologies for the wild goose chase!