We're excited to announce a major rewrite of our properties panel infrastructure. Its integration across our tool stack brings users an improved editing experience and offers developers new, powerful ways to extend.
Properties panels are an essential part of our editing tools. They are the implementation workhorse and allow you to edit what matters under the hood: Technical identifiers, domain-specific input/output bindings, and more. Today we announce a major rewrite of that very infrastructure.
The new properties panels for BPMN, DMN, and forms build upon that shared core and ship significant usability and extensibility improvements.
Try out the BPMN version in the create/append anything demo or in the Camunda Modeler.
A Substantial UX Rework
The new properties panel is a major change usability-wise. Rethought from scratch, it aims to simplify property editing as much as possible. But there is more: It ships with crucial new features, too.
The UI framework is simplified significantly. Tabs are gone as an additional search dimension. Get a quick overview of everything that can be configured and enjoy a new editing experience where scrolling to find your properties is all you need, and filtering is straightforward, too.
A group is the main building block a properties panel is composed of, and they got powerful:
- Dirty markers indicate whether a group has changed contents inside
- The group can naturally host different contents: As an item list container, it conveniently allows you to add new entries. As a header-only group, it contains a single call to action. As a plain group, it serves as a simple container for standard inputs.
Always know what you're doing. The reworked header shows a preview along with the element type and name. Group headers are adaptive and support their (optional) contents.
The new architecture allows components to be stateful, thus supporting async data loading and improving the integration with external, custom-made components.
A Shared Foundation
The new properties panels are composed around a shared core,
@bpmn-io/properties-panel. That shared core ensures a uniform UX and simplifies customizing by re-using existing building blocks.
Follow along with the reworked extension example to learn how to build your extensions upon the shared infrastructure.
Adapting your properties panel extensions to the new infrastructure, you have to perform two adjustments:
PropertiesProvider#getTabsis no longer used. Migrate to the new
- Previously exported entry factory functions are no longer available. Use components exported from
Look at the reworked BPMN properties panel extension example or check out the example migration and this pull request for guidance. Inspect individual property panel changelogs for further hints.
The new properties panel is a major improvement over our
0.x properties in infrastructure and UI framework terms. We are excited about what you'll build using it.
Did we miss anything? Did you spot a bug, or would you like to suggest an improvement? Reach out to us via our forums, tweet us @bpmn_io, or file your issues in the properties panel core or the respective implementation repository.
Get the latest releases via npm.
Join Camunda and build modeling tools people .