Field Groups

[raveling]

Grouping fields:

When configuring the Admin UI for users, it can sometimes be helpful to group a series of fields together to provide a related context and thereby improve the editing experience.

Grouping fields can be helpful in situations like:

• Addresses (street, suburb, postcode, country)
• SEO (meta title, meta description, meta image)
• Shipping details (height, length, depth, weight)

Progressive disclosure:

In addition to grouping related fields, providing Admin UI users with a means in which to hide or reveal a group of fields can move complex or less frequently used fields out of the main editing flow and into secondary locations. A progressive disclosure mechanism (e.g. accordion) would make it possible for the user to have more information within reach without causing visual overwhelm.

Before this feature, developers could place related fields in adjacent order on the item form, but the only way to visually signify relatedness, or offer progressive disclosure would involve the creation of a custom field view.

A Field Groups feature would make it easy for a developer to achieve the design intent below in in a low friction manner from within their schema.ts file.

[fkrauthan]

I would love a feature like that.

[dcousens]

A few thoughts around how this might look in configuration... posted here for posterity 📘

Using the .ui object

Option 1

const Post = list({
  ui: {
    groups: {
      attachment: {
        label: 'Attachment',
        description: 'a short description',
        // would need to error if the fields aren't contiguous and in order?
        fields: ['url', 'alt'],
      },
    },
  },
  fields: {
    content: text(),
    url: text(),
    alt: text(),
  },
})

Option 2

const Post = list({
  ui: {
    groups: [{
      from: 'url',
      to: 'alt',
      label: 'Attachment',
      description: 'a short description',
    }],
  },
  fields: {
    content: text(),
    url: text(),
    alt: text(),
  },
})

Not defined at the list level (not .ui)

Option 3

const Post = list({
  fields: {
    content: text(),
    ...group({
      label: 'Attachment',
      description: 'a short description',
      fields: {
        url: text(),
        alt: text(),
      },
    }),
  },
})

What about GraphQL and relationships and database naming

Option 4

const Post = list({
  fields: {
    content: text(),
    url: text(),
    attachment: group({
      label: 'Attachment',
      description: 'a short description',
      fields: {
        url: text(), // TODO: would this be attachment_url?
                     // For relationships? Post.attachment.url?
        alt: text(),
      },
    }),
  },
})

This may or may not be the desired outcome, but this is what I would expect if we put it in fields.
This may conflict with some ideas and idioms we have with structured JSON, or maybe it will be idiosyncratically aligned.

Related

• Field Groups #7584
• Nested lists, aka. "repeating fields", "sublists" #195
• (proof of concept) Allow fields to be grouped in the admin UI #4805

[pc-erin]

Glad to see this was added by #4805.

Might be good to add some documentation for it as well.