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.
The new BPMN properties panel in action.
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.
Flat structure
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.
Powerful groups
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.
Contextual headers
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.
Stateful components
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.
The new properties panel architecture.
Follow along with the reworked extension example to learn how to build your extensions upon the shared infrastructure.
Migration
Adapting your properties panel extensions to the new infrastructure, you have to perform two adjustments:
PropertiesProvider#getTabsis no longer used. Migrate to the newPropertiesProvider#getGroupsAPI instead.- Previously exported entry factory functions are no longer available. Use components exported from
@bpmn-io/properties-panelinstead.
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.
Wrapping Up
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, toot us on Mastodon, or file your issues in the properties panel core or the respective implementation repository.
Get the latest releases via npm.
Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people 
.