Saltar al contenido principal
La capa de diseño de una aplicación de Twenty es todo lo que el usuario ve: dónde aparece la aplicación en la barra lateral, qué vistas de lista incluye, cómo se organizan sus páginas de detalles de registro y qué componentes React personalizados se renderizan dentro de esas páginas. 
   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    └─────────────────────┘

​
En esta sección

Vistas

defineView — configuraciones de listas guardadas: columnas visibles, filtros, grupos.

Elementos del menú de navegación

defineNavigationMenuItem — entradas de la barra lateral que apuntan a vistas o URL externas.

Diseños de Página

definePageLayout y definePageLayoutTab — pestañas y widgets en la página de detalles de un registro.

Componentes de frontend

defineFrontComponent — componentes React aislados que se renderizan dentro de Twenty.

Elementos del menú de comandos

defineCommandMenuItem — registra componentes de frontend como entradas Cmd+K y acciones rápidas.

​
Dónde aparece la aplicación

UbicaciónQué controlaEntidad
Barra lateralUna entrada personalizada que enlaza a una vista guardada o a una URL externadefineNavigationMenuItem
Lista de registrosUna configuración guardada para un objeto — columnas visibles, orden, filtros, gruposdefineView
Página de detalles del registroLas pestañas y widgets en una página de registro (de tu propio objeto o de uno estándar)definePageLayout, definePageLayoutTab
Dentro de cualquiera de las anterioresUn widget React personalizado — botones, formularios, paneles, integracionesdefineFrontComponent
Menú de comandos (Cmd+K)Una acción rápida fijada o un comando ocultodefineCommandMenuItem
Los componentes de frontend se ejecutan dentro de un Web Worker aislado usando Remote DOM — se renderizan de forma nativa en la página (no dentro de un iframe), pero no pueden acceder directamente a la página o al DOM del host. La comunicación con Twenty ocurre a través de una API de host de paso de mensajes.