Resumen

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ón	Qué controla	Entidad
Barra lateral	Una entrada personalizada que enlaza a una vista guardada o a una URL externa	`defineNavigationMenuItem`
Lista de registros	Una configuración guardada para un objeto — columnas visibles, orden, filtros, grupos	`defineView`
Página de detalles del registro	Las 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 anteriores	Un widget React personalizado — botones, formularios, paneles, integraciones	`defineFrontComponent`
Configuración de la app	Una sección de configuración personalizada dentro de la pestaña Configuración de la app, en lugar de la interfaz predeterminada de variables.	`defineSettingsFrontComponent`
Menú de comandos (Cmd+K)	Una acción rápida fijada o un comando oculto	`defineCommandMenuItem`

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. Todavía están en desarrollo activo: el sandbox implementa un DOM parcial, por lo que los usos avanzados pueden fallar. Consulta Limitaciones actuales.

Aplicaciones

API

Autoalojamiento

Contribuir

Resumen

En esta sección

Vistas

Elementos del menú de navegación

Diseños de Página

Componentes de frontend

Elementos del menú de comandos

Dónde aparece la aplicación

​En esta sección

Vistas

Elementos del menú de navegación

Diseños de Página

Componentes de frontend

Elementos del menú de comandos

​Dónde aparece la aplicación

En esta sección

Dónde aparece la aplicación