Übersicht

Binden Sie Ihre App in das UI von Twenty ein – Seitenleisten-Einträge, gespeicherte Ansichten, Registerkarten auf Datensatzseiten und isolierte React-Komponenten.

Die Layout-Ebene einer Twenty-App umfasst alles, was der Benutzer sieht: wo die App in der Seitenleiste erscheint, welche Listenansichten sie bereitstellt, wie ihre Detailseiten für Datensätze angeordnet sind und welche benutzerdefinierten React-Komponenten innerhalb dieser Seiten gerendert werden.

   Sidebar               Record list            Record detail page
   ───────               ───────────            ──────────────────
   [📋 My View]    ────▶ ┌──────────┐          ┌─────────────────────┐
   [📋 Drafts ]          │ Companies│          │ Tabs: [Overview ]   │
   [📋 Inbox  ]          │ ──────── │          │       [Notes    ]   │
        ▲                │  Apple   │          │       [Hello    ]◀──── definePageLayoutTab
        │                │  Acme    │          │                     │   adds a tab...
        └ defineNavi-    │  …       │          │  ┌────────────────┐ │
          gationMenu-    └────▲─────┘          │  │                │ │
          Item points         │                │  │   React UI     │◀── …with a
          to a defineView     │                │  │  (sandboxed in │ │   defineFrontComponent
                              └ defineView     │  │   a Worker)    │ │   widget inside
                                picks columns  │  └────────────────┘ │
                                and filters    └─────────────────────┘

​

In diesem Abschnitt

Ansichten

defineView — gespeicherte Listen-Konfigurationen: sichtbare Spalten, Filter, Gruppen.

Navigationsmenüeinträge

defineNavigationMenuItem — Seitenleisten-Einträge, die auf Ansichten oder externe URLs verweisen.

Seitenlayouts

definePageLayout und definePageLayoutTab — Registerkarten und Widgets auf der Detailseite eines Datensatzes.

Frontend-Komponenten

defineFrontComponent — isolierte React-Komponenten, die innerhalb von Twenty gerendert werden.

Befehlsmenü-Einträge

defineCommandMenuItem — Frontend-Komponenten als Cmd+K-Einträge und Schnellaktionen registrieren.

​

Wo die App erscheint

Oberfläche	Was es steuert	Entität
Seitenleiste	Ein benutzerdefinierter Eintrag, der auf eine gespeicherte Ansicht oder eine externe URL verweist	defineNavigationMenuItem
Datensatzliste	Eine gespeicherte Konfiguration für ein Objekt – sichtbare Spalten, Reihenfolge, Filter, Gruppen	defineView
Detailseite des Datensatzes	Die Registerkarten und Widgets auf einer Datensatzseite (für Ihr eigenes Objekt oder ein Standardobjekt)	definePageLayout, definePageLayoutTab
Innerhalb eines der oben genannten Bereiche	Ein benutzerdefiniertes React-Widget – Schaltflächen, Formulare, Dashboards, Integrationen	defineFrontComponent
App-Einstellungen	Ein benutzerdefinierter Konfigurationsabschnitt im Tab “Einstellungen” der App, anstelle der standardmäßigen Variablen-Benutzeroberfläche	defineSettingsFrontComponent
Befehlsmenü (Cmd+K)	Eine angeheftete Schnellaktion oder ein versteckter Befehl	defineCommandMenuItem

Frontend-Komponenten laufen in einem isolierten Web Worker unter Verwendung von Remote DOM – sie werden nativ auf der Seite gerendert (nicht in einem iframe), können aber die Hostseite oder das DOM nicht direkt erreichen. Die Kommunikation mit Twenty erfolgt über eine Message-Passing-Host-API.