Integrate the properties panel in bpmn.js into an Angular 4 application

Developers Modeler
1

Hi,

To integrate the properties panel, I follow the example available on github (https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel) and move the code to Angular and it’s working well.:grinning:

I just have two questions about the example:

  • If I remove the file styles/app.less, the properties panel is not well integrated in the web page, it is displayed under the BPMN zone with a very bad design. I thought it is useful to override some css to give a different display, but at final it is really required :face_with_raised_eyebrow:. Why it is not integrate in the properties panel component?

  • Currently properties panel uses less format for the CSS which is not the case of others components like bpmn.js, dmn.js and diagram.js. There is CSS version available somewhere?

Thanks a lot for your help.

Olivier

2

The only part of the CSS that is relevant is this:

.properties-panel-parent {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 260px;
  z-index: 10;
  border-left: 1px solid #ccc;
  overflow: auto;
  &:empty {
    display: none;
  }
  > .djs-properties-panel {
    padding-bottom: 70px;
    min-height:100%;
  }
}

We do not make assumptions about how and where you want to position the properties panel, therefore these styles are not included.