How to disable the Properties Panel and Tools Palette

Developers Modeler
1

Hey Folks,

I’m currently using bpmn-js 8.0, I would like to know whether there’s any possibility of disabling the Properties Panel and the Tools Palette in the modeler.

question
question1920×1052 59.3 KB

I do not want to use the bpmn-js Viewer in this case. Any other suggestions.

Thank you in advance for the support ! :slight_smile:

2

Hi @lakshan_g, welcome!

Can you explain what do you mean by “disabling”? Do you want to completely remove them or should they non-editable?

3

Hey @Niklas_Kiefer ,

I want to make the properties panel and the tool palette completely non-editable.

4

I think this is not easily possible at the moment. How would you profit from a palette / properties panel which is displayed but not interactible?

5

Speaking of the business perspective I would want a certain BPMN diagram version to be open from the modeler, but won’t allow it be edited but will allow only to be deployed.

6

A pragmatic solution could be to just hide/disable via css.

7

Ideally, I want to avoid any users from editing in the Modeler. @maxtru much appreciated if you could provide me with a sample :slight_smile:

8

You would need to add a custom stylesheet in your application for example with

.djs-palette {
  visibility: hidden;
}

to hide the palette.

9

Thanks @maxtru . Yes that possible with the palette. But what are your suggestions for the properties panel, as per the requirement I do not want to hide the Properties Panel. But rather disable the properties from being changed, plus the User could see the properties in a disabled mode.

10

I assume you develop a custom application using bpmn-js?

As Niklas already pointed out, we don’t support showing but disabling the properties panel entirely out of the box.

However as a pragmatic solution you could:

  • Hide elements as desired using css (as I showed above)
  • Using plain JavaScript add the disabled attribute to all inputs in the properties panel
    • Example (note that the css selector would require some polishing)
      const allInputs = document.querySelectorAll('#properties-panel-container input');

allInputs.forEach(input => {
  input.disabled = true;
});
  • (a bit hacky) Using css, set pointer-events: none to all input elements inside the propertiesPanel
11

@maxtru any suggestion for disabling the below palette. Ideally wants to be disable on click for the User.
question2

12

Why would you like to display the context pad but make it disabled / not allow the user to click? In my opinion this would lead to a bad user experience?

Anyhow, you could use the same approaches as I outlined in my previous post.

1 Like
13

Thanks for the support @maxtru and @Niklas_Kiefer ! :slight_smile:

2 Likes