[meta] Replace property panel with Drupal Form API

Created on 24 January 2023, over 1 year ago
Updated 15 February 2023, over 1 year ago

Problem/Motivation

The property panel of bpmn_io is a constant topic of discussions and sees permanent suggestions for improvements. This is mainly driven by the context, that we all know the compelling Form API of Drupal core and therefore keep missing things, that would make UX and a11y so much better.

Proposed resolution

Instead of improving the "foreign" property panel, let's just replace it with Drupal's Form API completely. Instead of improving existing fields with more magic, let's just replace that panel. This requires to hook into the event that show the current property panel and invoke an ajax call with all the context data to ask the backend for the rendered form for it. This also requires feeding back each change in the form to bpmn_io so that it gets stored all the way long.

This might be slightly slower than the current property panel, but so much more powerful, especially with all the a11y improvements coming into ECA 1.2 where we get states support and autocompletion.

Remaining tasks

  • Build the communication back and forth for events that select another item in the canvas and for changes of field values in the form
  • Build controller on the Drupal site, which provides the contextual property panel as a rendered form
  • Theming for Claro and Gin - I guess we need to make the forms more condensed as usual
  • Provide some settings so that users can switch between the property panels of either Drupal or bpmn_io

User interface changes

The visual components will change for sure. Also, the a11y of the properties will increase a lot. It will then also automatically benefit from changes in ECA for the config forms of all the plugins, without having to update or adjust anything in bpmn_io.

API changes

No changes for existing components. Additional components will be those ajax calls to receive property panel forms from the Drupal backend.

Data model changes

No changes to the data model at all.

🌱 Plan
Status

Active

Version

1.1

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany jurgenhaas Gottmadingen

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @jurgenhaas
  • πŸ‡¨πŸ‡­Switzerland boromino

    Provide some settings so that users can switch between the property panels of either Drupal or bpmn_io

    Why not just implement it as a separate modeler plugin?

  • πŸ‡©πŸ‡ͺGermany mxh Offenburg

    When properly done, guess there's no reason to still use the bpmn property panel, or is there something that would be missing then?

  • πŸ‡©πŸ‡ͺGermany jurgenhaas Gottmadingen

    @boromino this could be done with a new modeller plugin. However, the modeller remains the same, it's just using a different UI. This matters because the used modeller is stored with the ECA config entity, and each model can only always be edited with the same modeller. Should we really keep both UI options, or maybe even skip one of the two eventually, then those models should still be editable with that same modeller. Therefore, the implementation would just load different javascript libraries, depending on which UI is being selected. The rest of the implementation remains the same.

    @mxh that's correct, we could skip the native UI for the property panel. For several reasons, that's something much later in the process, if ever. Not only does the new UI have to prove its capabilities first, but also the external Camunda desktop client uses the same logic so that we should keep support for that structure anyway. If it turns out that nobody continues using that UI in the bpmn_io modeller any longer, we can turn it off, but it won't be much overhead if we didn't.

  • πŸ‡©πŸ‡ͺGermany mxh Offenburg

    Not only does the new UI have to prove its capabilities first, but also the external Camunda desktop client uses the same logic so that we should keep support for that structure anyway.

    I think the only way to find out is to directly switch it to the new UI. That way it's more likely that occurring problems are being reported here. It's also worth noting that, when having full Drupal Form API capabilities, only then we are able to substantially improve UX with Ajax'ed dynamic forms and autocomplete suggestions. The other way around just doesn't seem worth it. The bpmn_io modeller could still support the model XML structure as it's doing now, by still storing configuration values there.

  • πŸ‡©πŸ‡ͺGermany jurgenhaas Gottmadingen

    Just to be clear, if we replace the property panel by Drupal's form API, the underlying modeller will still continue to maintain its XML structure. Otherwise, the whole canvas of that modeller wouldn't work any more. That's what I meant in the first item of the remaining tasks section:

    Build the communication back and forth for events that select another item in the canvas and for changes of field values in the form

    That means, when an element in the canvas is selected by the user, we need to hook into that event and build the correct property panel while getting the current values for those properties from the selected element. And when properties get changed in the form fields of the property panel, we need to send them back to bpmn_io which will update the XML model by that.

    In other words, this modeller remains the same, except for the property panel.

  • πŸ‡©πŸ‡ͺGermany mxh Offenburg
Production build 0.69.0 2024