Zum Hauptinhalt springen
Layout entities control how your app surfaces inside Twenty’s UI — what lives in the sidebar, which saved views ship with the app, and how a record detail page is arranged.

​
Layout concepts

ConceptWhat it controlsEntität
ViewA saved list configuration for an object — visible fields, order, filters, groupsdefineView
Navigation Menu ItemAn entry in the left sidebar that links to a view or an external URLdefineNavigationMenuItem
Page LayoutThe tabs and widgets that make up a record’s detail pagedefinePageLayout
Views, navigation items, and page layouts reference each other by universalIdentifier:
  • A navigation menu item of type VIEW points at a defineView identifier, so the sidebar link opens that saved view.
  • A page layout of type RECORD_PAGE targets an object and can embed front components inside its tabs as widgets.
Ansichten sind gespeicherte Konfigurationen dafür, wie Datensätze eines Objekts angezeigt werden — einschließlich sichtbarer Felder, deren Reihenfolge sowie angewendeter Filter oder Gruppen. Verwenden Sie defineView(), um vorkonfigurierte Ansichten mit Ihrer App auszuliefern:
src/views/example-view.ts
import { defineView, ViewKey } from 'twenty-sdk/define';
import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
import { NAME_FIELD_UNIVERSAL_IDENTIFIER } from '../objects/example-object';

export default defineView({
  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
  name: 'All example items',
  objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
  icon: 'IconList',
  key: ViewKey.INDEX,
  position: 0,
  fields: [
    {
      universalIdentifier: 'f926bdb7-6af7-4683-9a09-adbca56c29f0',
      fieldMetadataUniversalIdentifier: NAME_FIELD_UNIVERSAL_IDENTIFIER,
      position: 0,
      isVisible: true,
      size: 200,
    },
  ],
});
Hauptpunkte:
  • objectUniversalIdentifier gibt an, auf welches Objekt diese Ansicht angewendet wird.
  • key bestimmt den Ansichtstyp (z. B. ViewKey.INDEX für die Hauptlistenansicht).
  • fields steuert, welche Spalten erscheinen und in welcher Reihenfolge. Jedes Feld referenziert einen fieldMetadataUniversalIdentifier.
  • Für erweiterte Konfigurationen können Sie außerdem filters, filterGroups, groups und fieldGroups definieren.
  • position steuert die Reihenfolge, wenn mehrere Ansichten für dasselbe Objekt existieren.
Navigationsmenüeinträge fügen der Workspace-Seitenleiste benutzerdefinierte Einträge hinzu. Verwenden Sie defineNavigationMenuItem(), um auf Ansichten, externe URLs oder Objekte zu verlinken:
src/navigation-menu-items/example-navigation-menu-item.ts
import { defineNavigationMenuItem, NavigationMenuItemType } from 'twenty-sdk/define';
import { EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER } from '../views/example-view';

export default defineNavigationMenuItem({
  universalIdentifier: '9327db91-afa1-41b6-bd9d-2b51a26efb4c',
  name: 'example-navigation-menu-item',
  icon: 'IconList',
  color: 'blue',
  position: 0,
  type: NavigationMenuItemType.VIEW,
  viewUniversalIdentifier: EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER,
});
Hauptpunkte:
  • type bestimmt, worauf der Menüeintrag verweist: NavigationMenuItemType.VIEW für eine gespeicherte Ansicht oder NavigationMenuItemType.LINK für eine externe URL.
  • Für Ansichtslinks setzen Sie viewUniversalIdentifier. Für externe Links setzen Sie link.
  • position steuert die Reihenfolge in der Seitenleiste.
  • icon und color (optional) passen das Erscheinungsbild an.
Seitenlayouts ermöglichen es Ihnen, das Aussehen einer Datensatzdetailseite anzupassen — welche Tabs erscheinen, welche Widgets sich in jedem Tab befinden und wie sie angeordnet sind. Verwenden Sie definePageLayout(), um benutzerdefinierte Layouts mit Ihrer App auszuliefern:
src/page-layouts/example-record-page-layout.ts
import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';

export default definePageLayout({
  universalIdentifier: '203aeb94-6701-46d6-9af1-be2bbcc9e134',
  name: 'Example Record Page',
  type: 'RECORD_PAGE',
  objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
  tabs: [
    {
      universalIdentifier: '6ed26b60-a51d-4ad7-86dd-1c04c7f3cac5',
      title: 'Hello World',
      position: 50,
      icon: 'IconWorld',
      layoutMode: PageLayoutTabLayoutMode.CANVAS,
      widgets: [
        {
          universalIdentifier: 'aa4234e0-2e5f-4c02-a96a-573449e2351d',
          title: 'Hello World',
          type: 'FRONT_COMPONENT',
          configuration: {
            configurationType: 'FRONT_COMPONENT',
            frontComponentUniversalIdentifier:
              HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
          },
        },
      ],
    },
  ],
});
Hauptpunkte:
  • type ist typischerweise 'RECORD_PAGE', um die Detailansicht eines bestimmten Objekts anzupassen.
  • objectUniversalIdentifier gibt an, auf welches Objekt dieses Layout angewendet wird.
  • Jeder tab definiert einen Abschnitt der Seite mit title, position und layoutMode (CANVAS für ein freies Layout).
  • Jedes widget innerhalb eines Tabs kann eine Frontend-Komponente, eine Relationenliste oder andere eingebaute Widget-Typen rendern.
  • position auf Tabs steuert deren Reihenfolge. Verwenden Sie höhere Werte (z. B. 50), um benutzerdefinierte Tabs hinter den integrierten zu platzieren.