Support `fieldsets` in ui schema

[a-b-r-o-w-n]

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

As a developer of a custom sdk component, I would like to be able to have better control over the organization of the form UI by being able to group fields together in fieldsets.

Describe the solution you'd like

{
  "fieldsets": [
    {
      "title": "Advanced Settings",
      "fields": ["autoEndDialog", "disabled", "..."],
      "defaultCollapsed": true
    }
  ]
}

Additional context

This could also support the tabbed view that we do with the prompts today.

[a-b-r-o-w-n]

@sangwoohaan @mareekuh Getting this on your radar to start a discussion. @tomlm has requested this feature in the ui schema that we currently don't support.

Since we have talked about hiding some fields behind an "Advanced" section, I think this would be a good way to achieve that. Let's use this thread to discuss.

[mareekuh]

Could you share some examples of the scenario - what is the dev trying to accomplish? And what would be common examples for which fieldsets are needed/used?

[tomlm]

Any time you build a form UX which edits a number of fields you almost always end up wanting to organize them to make it easier to understand. For example

Color Properties

• BackgroundColor
• ForegroundColor
• TextColor
• Border Color

Another example is cluster things so that less used fields are below the fold or only accessible for advanced users.

Field1 Field2 Field3

Advanced Options<--expando/collapsed -->

• Advanced Field1
• Advanced Field2
• Advanced Field3

This has been part of GUIs toolkits and design since they were invented and every GUI system since then has supported this as a design pattern because it's an effective way of reducing the cognitive of the user who is working with the form.

FieldSet is the mechanism that w3 HTML defined as the a way to annotate that a group of input fields in a form should be grouped together. www.w3.org

It a key way of reducing the cognitive load of someone who is presented with a number of fields, and so shows up in many design style best practices:

Example:

If your form has more than six fields, it’s considered good practice to group questions into logical sections....

The fieldSet gives the creator of a component author the ability to describe to the UI the data necessary so that it can do a good job of building the form for that component.

It is important to note that a fieldSet does not proscribe what the GUI actually does with the grouping information...but without that information it is impossible for the UI to know what the logical groupings are.