Resumen

Qué cubre la capa de diseño

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 lista guardadas: columnas visibles, filtros, grupos.

Los elementos del menú de navegación

defineNavigationMenuItem — entradas laterales apuntando a vistas o URL externas.

Page Layouts

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

Componentes delanteros

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

Command Menu Items

defineCommandMenuItem - registra componentes frontales 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`, `definePageLayoutWidget`
Dentro de cualquiera de las anteriores	Un widget React personalizado — botones, formularios, paneles, integraciones	`defineFrontComponent`
Configuración de la app	Una entrada en el menú de configuración de la aplicación; declara tantas como necesites	`defineSettingsMenuItem`
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.

Desarrolladores

Aplicaciones

API

Autoalojamiento

Contribuir

Biblioteca de IU

Qué cubre la capa de diseño

En esta sección

Dónde aparece la aplicación

​Qué cubre la capa de diseño

​En esta sección

​Dónde aparece la aplicación

Qué cubre la capa de diseño

En esta sección

Dónde aparece la aplicación