Vue d'ensemble - Twenty Documentation

La couche de mise en page d’une application Twenty est tout ce que l’utilisateur voit : où l’application apparaît dans la barre latérale, quelles vues de liste elle fournit, comment ses pages de détails d’enregistrement sont organisées et quels composants React personnalisés sont rendus à l’intérieur de ces pages.

   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    └─────────────────────┘

Dans cette section

Vues

defineView — configurations de listes enregistrées : colonnes visibles, filtres, groupes.

Éléments de menu de navigation

defineNavigationMenuItem — entrées de barre latérale pointant vers des vues ou des URL externes.

Mises en page

definePageLayout et definePageLayoutTab — onglets et widgets sur la page de détails d’un enregistrement.

Composants frontaux

defineFrontComponent — composants React isolés rendus à l’intérieur de Twenty.

Éléments du menu de commande

defineCommandMenuItem — enregistre des composants frontaux comme entrées Cmd+K et actions rapides.

Où l’application apparaît

Surface	Ce qu’il contrôle	Entité
Barre latérale	Une entrée personnalisée pointant vers une vue enregistrée ou une URL externe	`defineNavigationMenuItem`
Liste des enregistrements	Une configuration enregistrée pour un objet — colonnes visibles, ordre, filtres, groupes	`defineView`
Page de détails de l’enregistrement	Les onglets et widgets sur une page d’enregistrement (celle de votre propre objet ou une page standard)	`definePageLayout`, `definePageLayoutTab`
À l’intérieur de n’importe lequel des éléments ci-dessus	Un widget React personnalisé — boutons, formulaires, tableaux de bord, intégrations	`defineFrontComponent`
Menu de commande (Cmd+K)	Une action rapide épinglée ou une commande masquée	`defineCommandMenuItem`

Les composants frontaux s’exécutent à l’intérieur d’un Web Worker isolé en utilisant Remote DOM — ils sont rendus nativement dans la page (et non dans une iframe), mais ne peuvent pas accéder directement à la page hôte ou au DOM. La communication avec Twenty se fait via une API hôte de passage de messages.

​Dans cette section