Field Groups

Organize long edit forms by grouping attributes under tabs.

When a product, order, or other entity has many attributes, showing every field at once is hard to scan. Define groups on the entity and assign attributes with group. Groups change only how the form is laid out. They do not change the stored record, GraphQL, or list columns.

entity.groups and attribute.group are not the same as entity.menu.group. The menu property is the sidebar section.

Prerequisites

• A Flexkit schema you can edit. See Schemas and Entity Reference.

Example

Define SEO and media groups on a product, then assign the related attributes:

import { defineEntity } from '@flexkit/schema';
 
export const products = defineEntity({
  name: 'product',
  plural: 'products',
  display: 'name',
  menu: { label: 'Products', group: 'catalog', icon: 'Tag' },
  groups: [
    { name: 'details', title: 'Details', icon: 'Info', default: true },
    { name: 'seo', title: 'SEO', icon: 'Search' },
    { name: 'media', title: 'Media', icon: 'Image' },
  ],
  attributes: [
    {
      name: 'name',
      label: 'Name',
      scope: 'local',
      dataType: 'string',
      inputType: 'text',
      group: 'details',
    },
    {
      name: 'sku',
      label: 'SKU',
      scope: 'global',
      dataType: 'string',
      inputType: 'text',
      group: 'details',
    },
    {
      name: 'metaTitle',
      label: 'SEO title',
      scope: 'local',
      dataType: 'string',
      inputType: 'text',
      group: 'seo',
    },
    {
      name: 'metaDescription',
      label: 'Meta description',
      scope: 'local',
      dataType: 'string',
      inputType: 'textarea',
      group: 'seo',
    },
    {
      name: 'images',
      label: 'Images',
      dataType: 'asset',
      inputType: 'relationship',
      group: ['media', 'seo'],
    },
  ],
});

An All fields tab is added automatically. It lists every attribute that is not field-hidden. Attributes without a group appear only there.

Hide the All fields tab

The reserved name all is the All fields tab. Add it to groups and set hidden: true:

import { defineEntity } from '@flexkit/schema';
 
export const products = defineEntity({
  name: 'product',
  plural: 'products',
  groups: [
    { name: 'details', title: 'Details' },
    { name: 'seo', title: 'SEO' },
    { name: 'all', hidden: true },
  ],
  attributes: [
    // ...
  ],
});

Ungrouped attributes then have no tab. Attributes that do not belong to any visible tab — ungrouped when All fields is hidden, or assigned only to a hidden group — are omitted from the form and from validation, so they do not block save. Assign every attribute you want editors to see.

Hidden groups

hidden is a plain boolean. A hidden group’s tab is not rendered, and attributes that belong only to it are left out of the form:

{
  name: 'internal',
  title: 'Internal',
  hidden: true,
}

Group visibility cannot depend on the record or the signed-in user. To keep a tab’s fields away from some users, bind those attributes to a permission space instead.

Reference

Entity groups

Array of group objects:

Attribute group

string or string[]. The attribute appears in each listed group and in All fields.

Related

• Entity Reference
• Attribute Reference
• Hidden and read-only fields