How to use field groups?

[compact vapor]

Hi, trying out the new app-builder npx create-twenty-app@latest my-twenty-app and have sucessfully created a data model as code. Cool so far. Now I want to create a defineView to control how the fields are arranged in the side panel.

The docs says fields can be grouped using fieldGroups but neither Claude nor myself can get this to work properly.
Everything gets lumped together in an "other" group. The positioning works though.

How do Claude and I fix this?

export default defineView({
  universalIdentifier: ASSIGNMENT_INDEX_VIEW_UID,
  name: 'Assignments',
  objectUniversalIdentifier: ASSIGNMENT_OBJECT_UID,
  key: ViewKey.INDEX,
  icon: 'IconBriefcase',
  openRecordIn: ViewOpenRecordIn.SIDE_PANEL,
  fieldGroups: [
    {
      universalIdentifier: ASSIGNMENT_VIEW_FIELD_GROUP_MAIN_UID,
      name: 'Main content',
      position: 0,
      isVisible: true,
    },
    {
      universalIdentifier: ASSIGNMENT_VIEW_FIELD_GROUP_META_UID,
      name: 'Meta content',
      position: 1,
      isVisible: true,
    },
  ],
  fields: [
    // Main content
    {
      universalIdentifier: ASSIGNMENT_INDEX_VIEW_FIELD_TITLE_UID,
      fieldMetadataUniversalIdentifier: ASSIGNMENT_TITLE_FIELD_UID,
      viewFieldGroupUniversalIdentifier: ASSIGNMENT_VIEW_FIELD_GROUP_MAIN_UID,
      position: 0,
      isVisible: true,
      size: 260,
    },
    {
      universalIdentifier: ASSIGNMENT_INDEX_VIEW_FIELD_DESCRIPTION_RAW_UID,
      fieldMetadataUniversalIdentifier: ASSIGNMENT_DESCRIPTION_RAW_FIELD_UID,
      viewFieldGroupUniversalIdentifier: ASSIGNMENT_VIEW_FIELD_GROUP_MAIN_UID,
      position: 1,
      isVisible: false,
    },
...

after half an hour and 60k tokens claude came up with this, maybe it means something to you

I found the root cause. The default record page layout for custom objects has viewId: null in the FIELDS_WIDGET widget, meaning it never reads field groups from the INDEX view. Let me check if page layouts in the manifest can fix this.

[viscid wolf]

CC: @bronze tangle

[echo sphinx]

@bronze tangle isn't working anymore @viscid wolf fyi

cc @blissful nebula

[blissful nebula]

Hi @compact vapor, the support for page layouts in apps is still a bit early and undocumented, we will try to improve that during the upcoming weeks.
Indeed, if your FIELDS_WIDGET widget config has no view associated with it, it will fallback to a "mock" FE-side and won't be editable (nothing will persist).
We are trying to find ways to avoid that even for app contributors.

Here is an example of page layout definition:

export default definePageLayout({
  universalIdentifier: '20cf7ccf-b4d8-4966-b9ea-36b1a1929ea1',
  name: 'Default Test Layout',
  type: 'RECORD_PAGE',
  objectUniversalIdentifier: '05eb09c7-1ee2-4f26-ab56-b14ac0392710',
  tabs: [
    {
      universalIdentifier: '2648eba6-1a44-499e-a86e-4c0032deeeb1',
      title: 'Home',
      position: 10,
      icon: 'IconHome',
      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
      widgets: [
        {
          universalIdentifier: '9237831a-8eb5-45b8-9e9b-29759b430769',
          title: 'Fields',
          type: 'FIELDS',
          configuration: {
            configurationType: 'FIELDS',
            viewUniversalIdentifier: 'fa78b802-2924-4963-b43a-3353a3196649',
          },
        },
      ],
    },
...

and here is a view bound to a FIELDS widget

export default defineView({
  universalIdentifier: 'fa78b802-2924-4963-b43a-3353a3196649',
  name: 'tyty-record-page-fields',
  objectUniversalIdentifier: '05eb09c7-1ee2-4f26-ab56-b14ac0392710',
  type: 'FIELDS_WIDGET',
  icon: 'IconList',
  position: 0,
  fields: [
  {
    universalIdentifier: 'f6a04d0b-3d8b-4cac-a373-b50f17f6a885',
    fieldMetadataUniversalIdentifier: '0f99515d-defe-477a-ac27-a9a7f78a072f',
    position: 0,
    isVisible: true,
    size: 200,
  },
  {
    universalIdentifier: 'b3202250-ec3c-4b0f-9c8b-d2eda3bb1867',
    fieldMetadataUniversalIdentifier: generateDefaultFieldUniversalIdentifier({
      objectUniversalIdentifier: '05eb09c7-1ee2-4f26-ab56-b14ac0392710',
      fieldName: 'createdAt',
    }),
    position: 1,
    isVisible: true,
    size: 200,
  },
...

The upcoming SDK upgrade should allow you to scaffold a default page-layout when you do "yarn twenty add object" the same way it does for views and navigation items and we will update the doc for people that don't want to use add. We have a more long term solution as well but I think if you take example from the 2 snippets I've shared above (+ a little help from Claude maybe!) you should be able to setup your widget.
Let me know 👍

[viscid wolf]

Oh okay, thanks for the info 👍

[compact vapor]

nice that worked, thanks. Only slight error in the wigdets.configuration; was viewId not viewUniversalIdentifier