Make it possible to structure element templates in sections

Is your feature request related to a problem? Please describe.

The properties panel structures contents logically into groups and these groups can be collapsed and expanded by users based on what is important to them and not.

Our existing way to structure element template fields into a large Custom Fields section does not well blend into the concept. Considering larger element templates, each of the fields can potentially belong to a logical group and as a template creator I’d assume I can use the same grouping mechanism for my templates, too.

Describe the solution you’d like

• As part of an element templates properties I’m able to define which group a particular input belongs to
• The properties panel will create such groups and organize the inputs accordingly

Describe alternatives you’ve considered

Consider our current “one group for all template fields” a feature and do no change.

Additional context

The following shows an early mock up for the soon to be shipped cloud REST connector template, with and without grouping:

[pinussilvestrus]

I can imagine offering grouping as an additional C8 template feature, without touching the existing custom properties behavior and existing properties panel groups, in the following way:

• Make it possible to define custom properties groups via groups
• Make it possible to define a group id in a respective property
• If no group id is provided or the group is not defined in the groups definition, the property lands into the default “Custom properties” group
• Don’t support list groups for now, since I assume this would mean more configuration effort (properties are no list items currently)

The “group is not defined in the groups definition” case could also be something to validate via JSON schema, but is not necessary IMHO if we have a reasonable default.

Given the following example template

{
  "name": "Grouping",
  "id": "example.com.grouping",
  "appliesTo": [
    "bpmn:ServiceTask"
  ],
  "groups": [
    {
      "id": "headers",
      "label": "Request headers"
    },
    {
      "id": "payload",
      "label": "Request payload"
    },
    {
      "id": "mapping",
      "label": "Response mapping"
    }
  ],
  "properties": [
    {
      "type": "String",
      "value": "http",
      "binding": {
        "type": "zeebe:taskDefinition:type"
      }
    },
    {
      "label": "REST Endpoint URL",
      "group": "headers",
      "type": "String",
      "binding": {
        "type": "zeebe:taskHeader",
        "key": "url"
      }
    },
    {
      "label": "REST Method",
      "group": "headers",
      "type": "Dropdown",
      "value": "get",
      "choices": [
        { "name": "GET", "value": "get" },
        { "name": "POST", "value": "post" },
        { "name": "PATCH", "value": "patch" },
        { "name": "DELETE", "value": "delete" }
      ],
      "binding": {
        "type": "zeebe:taskHeader",
        "key": "method"
      }
    },
    {
      "label": "Request Body",
      "description": "Data to send to the endpoint.",
      "value": "",
      "group": "payload",
      "type": "String",
      "binding": {
        "type": "zeebe:input",
        "name": "body"
      }
    },
    {
      "label": "Result Variable",
      "group": "mapping",
      "value": "response",
      "type": "String",
      "binding": {
        "type": "zeebe:output",
        "source": "= body"
      }
    }
  ]
}

it would resolve in the following UI

[andreasgeier]

Looks great to start with 👍