Data categories (Complex forms) proposal

I had an idea for the handling of the complex form example described by Ed:

Slide 1.1

User enters 1 or more data categories

Slide 1.2

Contains an [--alpaca|1.1--] placeholder, which requests a form document from the server. This is a json structure defined by alpaca which describes a form and all of its fields and validation patterns.

The form document is produced by server-side code using the answers from 1.1. The rendered form contains a set of fields, repeated for each of the data categories. Each set of fields is enclosed in an expander (sliding down from a heading).

Using one step per data category might be a possibility, but the code for the index in the left column won't handle it very well, and the user navigation could be a bit confusing.

Demo screenshot

Source json

{
    "title": "Data sources",
    "description": "About your data sources",
    "type": "object",
    "properties": {
      "group1": {
        "title": "Group1",
        "type": "object",
        "properties": {
          "lawful_basis":{
            "type":"string",
            "title":"Which of the following lawful bases do you rely on?",
            "required": true,
            "enum":[
                "Consent",
                "Legal obligation",
                "Vital interests",
                "Public task",
                "Legitimate interests",
                "Special category data",
                "Criminal office data"
            ]
          },
          "consent":{
            "type":"string",
            "title":"Is a freely given, specific, informed and unambiguous consent of data subjects required in order to proceed with the processing?",
            "required": true,
            "enum": ["Yes","No"]
          }
        }
      }
    }

}

The server-side code duplicates the group key for each of the selected data categories.