Support for forms with multi-select components and checkboxes/dropdowns/radio buttons that are pre-populated with process data ("dynamic forms")

User Story (Required on creation):

As a developer, I want to:

• fill out multi-select components (taglist and checklist) with data from a process variable.
• define the available, select options for select-type form components (checklist, radio, select, and taglist) with data from a process variable (pre-populated).

Functional Requirements (Required before implementation):

• The form-js library that implements these features is integrated into Tasklist and Cockpit
• A number of process variable types (in a specified value format) can be used to populate and/or fill the form inputs. This is documented.

Technical Requirements (Required before implementation):

In the following description, with "variable value(s) of type JSON" variables are meant that match the following C7 variable format condition:
variable.type === 'Json' || variable?.valueInfo?.serializationDataFormat === 'application/json'

• Bump form-js to a version >= 0.8.0-alpha.0
• The cam-tasklist-form component parses variable values of type JSON to JSON with the help of JSON#parse; currently, these variable values would be passed as strings to form-js's Form#importSchema.
• To define the available select options for select-type form components, variables with variable value of type JSON that match the name defined in the form-js definition *.form are passed as data to form-js' Form#importSchema; please consider the following form-js example where we pretend that the available options are provided by the variable with name myVariable with a variable value of type JSON:

  // my-form.form
  //...
  {
    id: 'Checklist_1',
    key: 'mailto',
    label: 'Email data to',
    type: 'checklist',
    valuesKey: 'myVariable'
    // ...
  },
  //...
  
  // Variable "myVariable"
  [
    {
      label: 'Dynamic Value 1',
      value: 'dynamicValue1'
    },
    {
      label: 'Dynamic Value 2',
      value: 'dynamicValue2'
    }
  ]

  • This format is rather verbose; we could transform a JSON array ["dynamicValue1", "dynamicValue2"] into the format shown above for rapid prototyping purposes.
    • value and label would be the same.
    • This could be a good 80%/rapid prototyping solution.
• The component type checklist and taglist produce JSON values; when submitting a form with such an input, the C7 variable type should be selected in a smart way:
  • When the component is already bound to an existing variable, reuse the variable type (e.g., when bound to a variable of type Object with serialization data format application/json, this type is reused when updating the variable)
  • When the component is not bound to an existing variable, use Json as the default variable type since this type can also be consumed by non-Java projects
•  Documentation
  • In the past, we had documentation that was more targeted to C7 users [1]; however, it was moved over to the C8 documentation
    • Check if the behavior described there makes sense in the C7 context and decide whether we need dedicated documentation for C7 or if we can document the C7 specifics in the C8 documentation
  • Document the strategy of defining variable types for variables when bound to a taglist or checklist component  

Limitations of Scope (Optional):

• The scope of this feature is limited to the scope of inputs supported in https://github.com/bpmn-io/form-js/issues/200, i.e., checklist, radio, select, and taglist

Hints (optional):

• The models dyn-forms.bpmn and dyn.form demonstrate the new features.
• To be synched with Form Field Data Population · Issue #55 · camunda/product-hub (github.com)

[1] https://github.com/camunda/camunda-docs-manual/commit/1cf4ba8e6c10b788b6a3d94780c139be7cfc7e19